feat: custom keywords and colors in keyword highlighting (#597)

* feat: support custom keywords and colors in global keyword highlighting (#590)

Add ability to create custom keyword highlight rules in global settings
(Settings > Terminal > Keyword Highlighting):

- Per-rule enable/disable toggle for both built-in and custom rules
- Add custom rules with label, regex pattern, and color picker
- Delete custom rules (built-in rules cannot be deleted)
- Pattern validation with error feedback
- Custom rules sync across devices via cloud sync
- i18n support (en, zh-CN)

Built-in categories (Error, Warning, OK, Info, Debug, URL/IP/MAC) are
preserved and cannot be deleted, only toggled and recolored.

Closes #590

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

* refactor: use dialog modal for adding custom keyword highlight rules

Replace inline form with a proper modal dialog:
- Button opens dialog instead of showing inline inputs
- Dialog has label+color, regex pattern, and live preview
- Reset and Add buttons side by side in footer area
- Add common.add i18n key (en, zh-CN)

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

* ui: unify button styles in keyword highlight section

Both buttons now use ghost variant with equal flex-1 width for a
cleaner, balanced layout.

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

* ui: fix keyword highlight rule list alignment

- Add placeholder spacer (w-5) for built-in rules to match delete
  button width on custom rules, keeping color pickers aligned
- Move regex pattern to second line for custom rules
- Use block+truncate for label and pattern text

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

* ui: hide regex, show edit/delete icons after label for custom rules

- Remove regex pattern display from rule list
- Add pencil (edit) and trash (delete) icons after custom rule label,
  visible on hover
- Edit opens the same dialog pre-filled with rule data
- Dialog supports both add and edit modes with appropriate titles/buttons

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

* ui: remove toggle dots, simplify edit/delete to plain icons

- Remove the red enable/disable dot button from all rules
- Replace Button wrappers with plain Lucide icons for edit/delete
  (no hover background, just cursor pointer)

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

* fix: preserve multi-pattern rules on edit, keep disabled state on reset

- Editing a custom rule now preserves patterns beyond the first one
- Reset to default colors no longer force-enables disabled rules

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

* fix: replace all patterns on edit instead of preserving hidden ones

When editing a custom rule, save only the single user-visible pattern
rather than silently keeping extra patterns the user cannot see.

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

* fix: preserve regex whitespace and multi-pattern rules on edit

- Stop trimming regex patterns on save (only trim for empty check)
- If pattern field unchanged during edit, preserve all original
  patterns so changing just label/color doesn't drop extra regexes

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

* fix: preserve additional patterns when editing custom rule

When editing, replace only the first pattern (the one shown in the
dialog) and keep any additional patterns intact to prevent data loss
for multi-pattern rules from sync or import.

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

---------

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

App.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Suspense, lazy, useCallback, useEffect, useEffectEvent, 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';
@@ -14,6 +14,7 @@ import { initializeFonts } from './application/state/fontStore';
 import { initializeUIFonts } from './application/state/uiFontStore';
 import { I18nProvider, useI18n } from './application/i18n/I18nProvider';
 import { matchesKeyBinding } from './domain/models';
+import { resolveGroupDefaults, applyGroupDefaults } from './domain/groupConfig';
 import { resolveHostAuth } from './domain/sshAuth';
 import { resolveHostTerminalThemeId } from './domain/terminalAppearance';
 import { collectSessionIds } from './domain/workspace';
@@ -193,15 +194,25 @@ function App({ settings }: { settings: SettingsState }) {
     sftpShowHiddenFiles,
     sftpUseCompressedUpload,
     sftpAutoOpenSidebar,
+    sftpDefaultViewMode,
     editorWordWrap,
     setEditorWordWrap,
     sessionLogsEnabled,
     sessionLogsDir,
     sessionLogsFormat,
     reapplyCurrentTheme,
-    immersiveMode,
+    workspaceFocusStyle,
   } = settings;
 
+  // Sync workspace focus indicator style to DOM for CSS targeting
+  useEffect(() => {
+    if (workspaceFocusStyle === 'border') {
+      document.documentElement.setAttribute('data-workspace-focus', 'border');
+    } else {
+      document.documentElement.removeAttribute('data-workspace-focus');
+    }
+  }, [workspaceFocusStyle]);
+
   const {
     hosts,
     keys,
@@ -228,8 +239,11 @@ function App({ settings }: { settings: SettingsState }) {
     deleteConnectionLog,
     clearUnsavedConnectionLogs,
     updateHostDistro,
+    updateHostLastConnected,
     convertKnownHostToHost,
     importDataFromString,
+    groupConfigs,
+    updateGroupConfigs,
   } = useVaultState();
 
   const {
@@ -286,30 +300,50 @@ function App({ settings }: { settings: SettingsState }) {
   const customThemes = useCustomThemes();
 
   // Resolve the effective TerminalTheme for the currently focused terminal tab
+  const hostById = useMemo(
+    () => new Map(hosts.map((host) => [host.id, host])),
+    [hosts],
+  );
+  const sessionById = useMemo(
+    () => new Map(sessions.map((session) => [session.id, session])),
+    [sessions],
+  );
+  const sessionByIdRef = useRef(sessionById);
+  sessionByIdRef.current = sessionById;
+  const workspaceById = useMemo(
+    () => new Map(workspaces.map((workspace) => [workspace.id, workspace])),
+    [workspaces],
+  );
+  const themeById = useMemo(
+    () => new Map([...customThemes, ...TERMINAL_THEMES].map((theme) => [theme.id, theme])),
+    [customThemes],
+  );
   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 host = hostById.get(s.hostId) ?? null;
       const themeId = resolveHostTerminalThemeId(host, currentTerminalTheme.id);
-      return TERMINAL_THEMES.find(t => t.id === themeId)
-        || customThemes.find(t => t.id === themeId)
-        || currentTerminalTheme;
+      return themeById.get(themeId) || currentTerminalTheme;
     };
 
     // Workspace
-    const workspace = workspaces.find(w => w.id === activeTabId);
+    const workspace = workspaceById.get(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));
+        const focused = (workspace.focusedSessionId
+          ? sessionById.get(workspace.focusedSessionId)
+          : null)
+          ?? wsSessionIds.map((id) => sessionById.get(id)).find(Boolean);
         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[];
+      const wsSessions = sessionIds
+        .map((id) => sessionById.get(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);
@@ -317,13 +351,12 @@ function App({ settings }: { settings: SettingsState }) {
     }
 
     // Single session tab
-    const session = sessions.find(s => s.id === activeTabId);
+    const session = sessionById.get(activeTabId);
     if (!session) return null;
     return resolveTheme(session);
-  }, [activeTabId, sessions, workspaces, hosts, currentTerminalTheme, customThemes]);
+  }, [activeTabId, currentTerminalTheme, hostById, sessionById, themeById, workspaceById]);
 
   useImmersiveMode({
-    isImmersive: immersiveMode,
     activeTabId,
     activeTerminalTheme,
     restoreOriginalTheme: reapplyCurrentTheme,
@@ -353,6 +386,7 @@ function App({ settings }: { settings: SettingsState }) {
     snippetPackages,
     portForwardingRules: portForwardingRulesForSync,
     knownHosts,
+    groupConfigs,
     settingsVersion: settings.settingsVersion,
     onApplyPayload: (payload) => {
       applySyncPayload(payload, {
@@ -378,6 +412,147 @@ function App({ settings }: { settings: SettingsState }) {
 
   // Window controls - must be before update toast effect which uses openSettingsWindow
   const { openSettingsWindow } = useWindowControls();
+  const _handleTrayJumpToSession = useEffectEvent((sessionId: string) => {
+    const session = sessions.find((item) => item.id === sessionId);
+    if (session?.workspaceId) {
+      setActiveTabId(session.workspaceId);
+      setWorkspaceFocusedSession(session.workspaceId, sessionId);
+      return;
+    }
+    setActiveTabId(sessionId);
+  });
+  const _handleTrayTogglePortForward = useEffectEvent((ruleId: string, start: boolean) => {
+    const rule = portForwardingRules.find((item) => item.id === ruleId);
+    if (!rule) return;
+    const host = rule.hostId ? hosts.find((item) => item.id === rule.hostId) : undefined;
+    if (!host) {
+      toast.error(t("pf.error.hostNotFound"));
+      return;
+    }
+
+    if (start) {
+      const effectiveHost = resolveEffectiveHost(host);
+      void startTunnel(rule, effectiveHost, hosts, keys, identities, (status, error) => {
+        if (status === "error" && error) toast.error(error);
+      }, rule.autoStart);
+      return;
+    }
+
+    void stopTunnel(ruleId);
+  });
+  const _handleTrayPanelConnect = useEffectEvent((hostId: string) => {
+    const host = hosts.find((item) => item.id === hostId);
+    if (!host) {
+      toast.error(t("pf.error.hostNotFound"));
+      return;
+    }
+
+    const effectiveHost = resolveEffectiveHost(host);
+
+    const { username, hostname: localHost } = systemInfoRef.current;
+    if (effectiveHost.protocol === 'serial') {
+      const portName = host.hostname.split('/').pop() || host.hostname;
+      const sessionId = connectToHost(effectiveHost);
+      addConnectionLog({
+        sessionId,
+        hostId: host.id,
+        hostLabel: host.label || `Serial: ${portName}`,
+        hostname: host.hostname,
+        username,
+        protocol: 'serial',
+        startTime: Date.now(),
+        localUsername: username,
+        localHostname: localHost,
+        saved: false,
+      });
+      return;
+    }
+
+    const protocol = effectiveHost.moshEnabled ? 'mosh' : (effectiveHost.protocol || 'ssh');
+    const resolvedAuth = resolveHostAuth({ host: effectiveHost, keys, identities });
+    const sessionId = connectToHost(effectiveHost);
+    addConnectionLog({
+      sessionId,
+      hostId: host.id,
+      hostLabel: host.label,
+      hostname: host.hostname,
+      username: resolvedAuth.username || 'root',
+      protocol: protocol as 'ssh' | 'telnet' | 'local' | 'mosh',
+      startTime: Date.now(),
+      localUsername: username,
+      localHostname: localHost,
+      saved: false,
+    });
+  });
+  const _handleGlobalHotkeyKeyDown = useEffectEvent((e: KeyboardEvent) => {
+    const isMac = hotkeyScheme === 'mac';
+    const target = e.target as HTMLElement;
+    const isFormElement = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
+    const isMonacoElement =
+      target instanceof HTMLElement &&
+      !!target.closest?.('.monaco-editor, .monaco-diff-editor, .monaco-inputbox');
+    const isXtermInput =
+      target instanceof HTMLElement &&
+      !!target.closest?.(".xterm, .xterm-helper-textarea, .xterm-screen, .xterm-viewport");
+
+    if ((isFormElement || isMonacoElement) && !isXtermInput && e.key !== 'Escape') {
+      return;
+    }
+
+    const isTerminalElement =
+      target instanceof HTMLElement &&
+      !!target.closest?.(".xterm, .xterm-helper-textarea, .xterm-screen, .xterm-viewport");
+    const isTerminalInPath = Boolean(
+      e.composedPath?.().some(
+        (node) =>
+          node instanceof HTMLElement &&
+          (node.classList.contains("xterm") ||
+            node.classList.contains("xterm-helper-textarea") ||
+            node.classList.contains("xterm-screen") ||
+            node.classList.contains("xterm-viewport") ||
+            node.hasAttribute("data-session-id")),
+      ),
+    );
+
+    for (const binding of keyBindings) {
+      const keyStr = isMac ? binding.mac : binding.pc;
+      if (!matchesKeyBinding(e, keyStr, isMac)) continue;
+      if (HOTKEY_DEBUG) console.log('[Hotkeys] Matched binding:', binding.action, keyStr);
+      if (binding.category === 'sftp') {
+        continue;
+      }
+      const terminalActions = ['copy', 'paste', 'selectAll', 'clearBuffer', 'searchTerminal'];
+      if (terminalActions.includes(binding.action)) {
+        if (isTerminalElement) {
+          return;
+        }
+        continue;
+      }
+
+      e.preventDefault();
+      e.stopPropagation();
+      if (HOTKEY_DEBUG) {
+        console.log('[Hotkeys] Global handle', {
+          action: binding.action,
+          key: e.key,
+          meta: e.metaKey,
+          ctrl: e.ctrlKey,
+          alt: e.altKey,
+          shift: e.shiftKey,
+          targetTag: target?.tagName,
+          isTerminalElement,
+          isTerminalInPath,
+        });
+      }
+      executeHotkeyAction(binding.action, e);
+      return;
+    }
+  });
+  const _handleEscapeKeyDown = useEffectEvent((e: KeyboardEvent) => {
+    if (e.key === 'Escape' && isQuickSwitcherOpen) {
+      setIsQuickSwitcherOpen(false);
+    }
+  });
 
   // Show toast notification when update is available (only when auto-download is idle)
   useEffect(() => {
@@ -444,6 +619,7 @@ function App({ settings }: { settings: SettingsState }) {
     hosts,
     keys,
     identities,
+    groupConfigs,
   });
 
   // Sync tray menu data + handle tray actions
@@ -484,110 +660,34 @@ function App({ settings }: { settings: SettingsState }) {
     if (!bridge?.onTrayFocusSession || !bridge?.onTrayTogglePortForward) return;
 
     const unsubscribeFocus = bridge.onTrayFocusSession((sessionId) => {
-      // Find the session to check if it belongs to a workspace
-      const session = sessions.find((s) => s.id === sessionId);
-      if (session?.workspaceId) {
-        // Session is in a workspace - navigate to workspace and focus the session
-        setActiveTabId(session.workspaceId);
-        setWorkspaceFocusedSession(session.workspaceId, sessionId);
-      } else {
-        // Standalone session or session not found - just set tab
-        setActiveTabId(sessionId);
-      }
+      _handleTrayJumpToSession(sessionId);
     });
-
     const unsubscribeToggle = bridge.onTrayTogglePortForward((ruleId, start) => {
-      const rule = portForwardingRules.find((r) => r.id === ruleId);
-      if (!rule) return;
-      const host = rule.hostId ? hosts.find((h) => h.id === rule.hostId) : undefined;
-      if (!host) {
-        toast.error(t("pf.error.hostNotFound"));
-        return;
-      }
-
-      if (start) {
-        void startTunnel(rule, host, hosts, keys, identities, (status, error) => {
-          if (status === "error" && error) toast.error(error);
-        }, rule.autoStart);
-      } else {
-        void stopTunnel(ruleId);
-      }
+      _handleTrayTogglePortForward(ruleId, start);
     });
 
     return () => {
       unsubscribeFocus?.();
       unsubscribeToggle?.();
     };
-  }, [hosts, identities, keys, portForwardingRules, sessions, setActiveTabId, setWorkspaceFocusedSession, startTunnel, stopTunnel, t]);
+  }, []);
 
   // Tray panel actions (from main process)
   useEffect(() => {
-    const handlerJump = (sessionId: string) => {
-      // Find the session to check if it belongs to a workspace
-      const session = sessions.find((s) => s.id === sessionId);
-      if (session?.workspaceId) {
-        // Session is in a workspace - navigate to workspace and focus the session
-        setActiveTabId(session.workspaceId);
-        setWorkspaceFocusedSession(session.workspaceId, sessionId);
-      } else {
-        // Standalone session or session not found - just set tab
-        setActiveTabId(sessionId);
-      }
-    };
-
-    const handlerConnect = (hostId: string) => {
-      const host = hosts.find((h) => h.id === hostId);
-      if (!host) {
-        toast.error(t("pf.error.hostNotFound"));
-        return;
-      }
-
-      const { username, hostname: localHost } = systemInfoRef.current;
-      if (host.protocol === 'serial') {
-        const portName = host.hostname.split('/').pop() || host.hostname;
-        const sessionId = connectToHost(host);
-        addConnectionLog({
-          sessionId,
-          hostId: host.id,
-          hostLabel: host.label || `Serial: ${portName}`,
-          hostname: host.hostname,
-          username,
-          protocol: 'serial',
-          startTime: Date.now(),
-          localUsername: username,
-          localHostname: localHost,
-          saved: false,
-        });
-        return;
-      }
-
-      const protocol = host.moshEnabled ? 'mosh' : (host.protocol || 'ssh');
-      const resolvedAuth = resolveHostAuth({ host, keys, identities });
-      const sessionId = connectToHost(host);
-      addConnectionLog({
-        sessionId,
-        hostId: host.id,
-        hostLabel: host.label,
-        hostname: host.hostname,
-        username: resolvedAuth.username || 'root',
-        protocol: protocol as 'ssh' | 'telnet' | 'local' | 'mosh',
-        startTime: Date.now(),
-        localUsername: username,
-        localHostname: localHost,
-        saved: false,
-      });
-    };
-
     const bridge = netcattyBridge.get();
     if (!bridge?.onTrayPanelJumpToSession || !bridge?.onTrayPanelConnectToHost) return;
 
-    const unsubscribeJump = bridge.onTrayPanelJumpToSession(handlerJump);
-    const unsubscribeConnect = bridge.onTrayPanelConnectToHost(handlerConnect);
+    const unsubscribeJump = bridge.onTrayPanelJumpToSession((sessionId) => {
+      _handleTrayJumpToSession(sessionId);
+    });
+    const unsubscribeConnect = bridge.onTrayPanelConnectToHost((hostId) => {
+      _handleTrayPanelConnect(hostId);
+    });
     return () => {
       unsubscribeJump?.();
       unsubscribeConnect?.();
     };
-  }, [addConnectionLog, connectToHost, hosts, identities, keys, sessions, setActiveTabId, setWorkspaceFocusedSession, t]);
+  }, []);
 
   // Keyboard-interactive authentication (2FA/MFA) event listener
   useEffect(() => {
@@ -904,96 +1004,21 @@ function App({ settings }: { settings: SettingsState }) {
   useEffect(() => {
     if (hotkeyScheme === 'disabled' || isHotkeyRecording) return;
 
-    const isMac = hotkeyScheme === 'mac';
-    if (HOTKEY_DEBUG) {
-      console.log('[Hotkeys] Registering global hotkey handler, scheme:', hotkeyScheme, 'bindings count:', keyBindings.length);
-    }
-
     const handleGlobalKeyDown = (e: KeyboardEvent) => {
-      // Don't handle if we're in an input or textarea (except for Escape)
-      // Note: xterm terminal handles its own key interception via attachCustomKeyEventHandler
-      const target = e.target as HTMLElement;
-      const isFormElement = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
-      const isMonacoElement =
-        target instanceof HTMLElement &&
-        !!target.closest?.('.monaco-editor, .monaco-diff-editor, .monaco-inputbox');
-      const isXtermInput =
-        target instanceof HTMLElement &&
-        !!target.closest?.(".xterm, .xterm-helper-textarea, .xterm-screen, .xterm-viewport");
-
-      // Monaco is not always contentEditable/input, so treat it as an editor surface.
-      if ((isFormElement || isMonacoElement) && !isXtermInput && e.key !== 'Escape') {
-        return;
-      }
-
-      const isTerminalElement =
-        target instanceof HTMLElement &&
-        !!target.closest?.(".xterm, .xterm-helper-textarea, .xterm-screen, .xterm-viewport");
-      const isTerminalInPath = Boolean(
-        e.composedPath?.().some(
-          (node) =>
-            node instanceof HTMLElement &&
-            (node.classList.contains("xterm") ||
-              node.classList.contains("xterm-helper-textarea") ||
-              node.classList.contains("xterm-screen") ||
-              node.classList.contains("xterm-viewport") ||
-              node.hasAttribute("data-session-id")),
-        ),
-      );
-
-      // Check each key binding
-      for (const binding of keyBindings) {
-        const keyStr = isMac ? binding.mac : binding.pc;
-        if (matchesKeyBinding(e, keyStr, isMac)) {
-          if (HOTKEY_DEBUG) console.log('[Hotkeys] Matched binding:', binding.action, keyStr);
-          // SFTP shortcuts are handled by SFTP-specific hooks.
-          if (binding.category === 'sftp') {
-            continue;
-          }
-          // Terminal-specific actions should be handled by the terminal
-          // Don't handle them at app level
-          const terminalActions = ['copy', 'paste', 'selectAll', 'clearBuffer', 'searchTerminal'];
-          if (terminalActions.includes(binding.action)) {
-            if (isTerminalElement) {
-              return; // Let terminal handle it
-            }
-            continue; // Ignore terminal actions outside terminal
-          }
-
-          e.preventDefault();
-          e.stopPropagation();
-          if (HOTKEY_DEBUG) {
-            console.log('[Hotkeys] Global handle', {
-              action: binding.action,
-              key: e.key,
-              meta: e.metaKey,
-              ctrl: e.ctrlKey,
-              alt: e.altKey,
-              shift: e.shiftKey,
-              targetTag: target?.tagName,
-              isTerminalElement,
-              isTerminalInPath,
-            });
-          }
-          executeHotkeyAction(binding.action, e);
-          return;
-        }
-      }
+      _handleGlobalHotkeyKeyDown(e);
     };
 
     window.addEventListener('keydown', handleGlobalKeyDown, true);
     return () => window.removeEventListener('keydown', handleGlobalKeyDown, true);
-  }, [hotkeyScheme, keyBindings, isHotkeyRecording, executeHotkeyAction]);
+  }, [hotkeyScheme, isHotkeyRecording]);
 
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isQuickSwitcherOpen) {
-        setIsQuickSwitcherOpen(false);
-      }
+      _handleEscapeKeyDown(e);
     };
     window.addEventListener('keydown', onKeyDown);
     return () => window.removeEventListener('keydown', onKeyDown);
-  }, [isQuickSwitcherOpen]);
+  }, []);
 
   const quickResults = useMemo(() => {
     if (!isQuickSwitcherOpen) return [];
@@ -1006,7 +1031,7 @@ function App({ settings }: { settings: SettingsState }) {
       )
       : hosts;
     return filtered;
-  }, [hosts, quickSearch, isQuickSwitcherOpen]);
+  }, [quickSearch, hosts, isQuickSwitcherOpen]);
 
   const handleDeleteHost = useCallback((hostId: string) => {
     const target = hosts.find(h => h.id === hostId);
@@ -1016,6 +1041,9 @@ function App({ settings }: { settings: SettingsState }) {
   }, [hosts, updateHosts, t]);
 
   // System info for connection logs
+  const hostsRef = useRef(hosts);
+  hostsRef.current = hosts;
+
   const systemInfoRef = useRef<{ username: string; hostname: string }>({
     username: 'user',
     hostname: 'localhost',
@@ -1054,14 +1082,22 @@ function App({ settings }: { settings: SettingsState }) {
     });
   }, [addConnectionLog, createLocalTerminalWithCurrentShell]);
 
+  const resolveEffectiveHost = useCallback((host: Host): Host => {
+    if (!host.group) return host;
+    const groupDefaults = resolveGroupDefaults(host.group, groupConfigs);
+    return applyGroupDefaults(host, groupDefaults);
+  }, [groupConfigs]);
+
   // Wrapper to connect to host with logging
   const handleConnectToHost = useCallback((host: Host) => {
     const { username, hostname: localHost } = systemInfoRef.current;
 
+    const effectiveHost = resolveEffectiveHost(host);
+
     // Handle serial hosts separately
-    if (host.protocol === 'serial') {
+    if (effectiveHost.protocol === 'serial') {
       const portName = host.hostname.split('/').pop() || host.hostname;
-      const sessionId = connectToHost(host);
+      const sessionId = connectToHost(effectiveHost);
       addConnectionLog({
         sessionId,
         hostId: host.id,
@@ -1077,9 +1113,9 @@ function App({ settings }: { settings: SettingsState }) {
       return;
     }
 
-    const protocol = host.moshEnabled ? 'mosh' : (host.protocol || 'ssh');
-    const resolvedAuth = resolveHostAuth({ host, keys, identities });
-    const sessionId = connectToHost(host);
+    const protocol = effectiveHost.moshEnabled ? 'mosh' : (effectiveHost.protocol || 'ssh');
+    const resolvedAuth = resolveHostAuth({ host: effectiveHost, keys, identities });
+    const sessionId = connectToHost(effectiveHost);
     addConnectionLog({
       sessionId,
       hostId: host.id,
@@ -1092,13 +1128,24 @@ function App({ settings }: { settings: SettingsState }) {
       localHostname: localHost,
       saved: false,
     });
-  }, [addConnectionLog, connectToHost, identities, keys]);
+  }, [addConnectionLog, connectToHost, resolveEffectiveHost, identities, keys]);
+
+  // Wrap updateSessionStatus to track lastConnectedAt on successful connection
+  const handleSessionStatusChange = useCallback((sessionId: string, status: TerminalSession['status']) => {
+    updateSessionStatus(sessionId, status);
+    if (status === 'connected') {
+      const session = sessionByIdRef.current.get(sessionId);
+      if (session?.hostId) {
+        updateHostLastConnected(session.hostId);
+      }
+    }
+  }, [updateSessionStatus, updateHostLastConnected]);
 
   // Wrapper to create serial session with logging
-  const handleConnectSerial = useCallback((config: SerialConfig) => {
+  const handleConnectSerial = useCallback((config: SerialConfig, options?: { charset?: string }) => {
     const { username, hostname } = systemInfoRef.current;
     const portName = config.path.split('/').pop() || config.path;
-    const sessionId = createSerialSession(config);
+    const sessionId = createSerialSession(config, options);
     addConnectionLog({
       sessionId,
       hostId: '',
@@ -1146,24 +1193,25 @@ function App({ settings }: { settings: SettingsState }) {
     }
   }, [sessions, connectionLogs, updateConnectionLog]);
 
-  // Check if host has multiple protocols enabled
+  // Check if host has multiple protocols enabled (using effective/resolved host)
   const hasMultipleProtocols = useCallback((host: Host) => {
+    const effective = resolveEffectiveHost(host);
     let count = 0;
     // SSH is always available as base protocol (unless explicitly set to something else)
-    if (host.protocol === 'ssh' || !host.protocol) count++;
+    if (effective.protocol === 'ssh' || !effective.protocol) count++;
     // Mosh adds another option
-    if (host.moshEnabled) count++;
+    if (effective.moshEnabled) count++;
     // Telnet adds another option
-    if (host.telnetEnabled) count++;
+    if (effective.telnetEnabled) count++;
     // If protocol is explicitly telnet (not ssh), count it
-    if (host.protocol === 'telnet' && !host.telnetEnabled) count++;
+    if (effective.protocol === 'telnet' && !effective.telnetEnabled) count++;
     return count > 1;
-  }, []);
+  }, [resolveEffectiveHost]);
 
   // Handle host connect with protocol selection (used by QuickSwitcher)
   const handleHostConnectWithProtocolCheck = useCallback((host: Host) => {
     if (hasMultipleProtocols(host)) {
-      setProtocolSelectHost(host);
+      setProtocolSelectHost(resolveEffectiveHost(host));
       setIsQuickSwitcherOpen(false);
       setQuickSearch('');
     } else {
@@ -1171,7 +1219,7 @@ function App({ settings }: { settings: SettingsState }) {
       setIsQuickSwitcherOpen(false);
       setQuickSearch('');
     }
-  }, [hasMultipleProtocols, handleConnectToHost]);
+  }, [hasMultipleProtocols, handleConnectToHost, resolveEffectiveHost]);
 
   // Handle protocol selection from dialog
   const handleProtocolSelect = useCallback((protocol: HostProtocol, port: number) => {
@@ -1262,7 +1310,7 @@ function App({ settings }: { settings: SettingsState }) {
   }, []);
 
   return (
-    <div className={cn("flex flex-col h-screen text-foreground font-sans netcatty-shell", immersiveMode && activeTerminalTheme && "immersive-transition")} onContextMenu={handleRootContextMenu}>
+    <div className={cn("flex flex-col h-screen text-foreground font-sans netcatty-shell", activeTerminalTheme && "immersive-transition")} onContextMenu={handleRootContextMenu}>
       <TopTabs
         theme={resolvedTheme}
         hosts={hosts}
@@ -1283,7 +1331,7 @@ function App({ settings }: { settings: SettingsState }) {
         onToggleTheme={handleToggleTheme}
         onOpenSettings={handleOpenSettings}
         onSyncNow={handleSyncNowManual}
-        isImmersiveActive={immersiveMode && activeTerminalTheme !== null}
+        isImmersiveActive={activeTerminalTheme !== null}
         onStartSessionDrag={setDraggingSessionId}
         onEndSessionDrag={handleEndSessionDrag}
         onReorderTabs={reorderTabs}
@@ -1313,6 +1361,8 @@ function App({ settings }: { settings: SettingsState }) {
             onConnectSerial={handleConnectSerial}
             onDeleteHost={handleDeleteHost}
             onConnect={handleConnectToHost}
+            groupConfigs={groupConfigs}
+            onUpdateGroupConfigs={updateGroupConfigs}
             onUpdateHosts={updateHosts}
             onUpdateKeys={updateKeys}
             onUpdateIdentities={updateIdentities}
@@ -1339,7 +1389,9 @@ function App({ settings }: { settings: SettingsState }) {
           hosts={hosts}
           keys={keys}
           identities={identities}
+          groupConfigs={groupConfigs}
           updateHosts={updateHosts}
+          sftpDefaultViewMode={sftpDefaultViewMode}
           sftpDoubleClickBehavior={sftpDoubleClickBehavior}
           sftpAutoSync={sftpAutoSync}
           sftpShowHiddenFiles={sftpShowHiddenFiles}
@@ -1352,6 +1404,7 @@ function App({ settings }: { settings: SettingsState }) {
 
         <TerminalLayerMount
           hosts={hosts}
+          groupConfigs={groupConfigs}
           keys={keys}
           identities={identities}
           snippets={snippets}
@@ -1371,7 +1424,7 @@ function App({ settings }: { settings: SettingsState }) {
           onUpdateTerminalFontFamilyId={setTerminalFontFamilyId}
           onUpdateTerminalFontSize={setTerminalFontSize}
           onCloseSession={closeSession}
-          onUpdateSessionStatus={updateSessionStatus}
+          onUpdateSessionStatus={handleSessionStatusChange}
           onUpdateHostDistro={updateHostDistro}
           onUpdateHost={(host) => updateHosts(hosts.map(h => h.id === host.id ? host : h))}
           onAddKnownHost={(kh) => updateKnownHosts([...knownHosts, kh])}
@@ -1389,6 +1442,7 @@ function App({ settings }: { settings: SettingsState }) {
           isBroadcastEnabled={isBroadcastEnabled}
           onToggleBroadcast={toggleBroadcast}
           updateHosts={updateHosts}
+          sftpDefaultViewMode={sftpDefaultViewMode}
           sftpDoubleClickBehavior={sftpDoubleClickBehavior}
           sftpAutoSync={sftpAutoSync}
           sftpShowHiddenFiles={sftpShowHiddenFiles}

application/i18n/locales/en.ts

@@ -21,6 +21,7 @@ const en: Messages = {
   'common.clear': 'Clear',
   'common.optional': 'Optional',
   'common.selectPlaceholder': 'Select...',
+  'common.add': 'Add',
   'common.rename': 'Rename',
   'common.refresh': 'Refresh',
   'common.continue': 'Continue',
@@ -196,6 +197,9 @@ const en: Messages = {
   'settings.application.github.subtitle': 'Source code',
   'settings.application.whatsNew': "What's new",
   'settings.application.whatsNew.subtitle': 'Show release notes',
+  'settings.vault.title': 'Vault',
+  'settings.vault.showRecentHosts': 'Show recently connected hosts',
+  'settings.vault.showRecentHostsDesc': 'Display a section of recently connected hosts at the top of the vault',
 
   // Update notifications
   'update.available.title': 'Update Available',
@@ -231,9 +235,6 @@ 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.',
@@ -327,6 +328,14 @@ const en: Messages = {
   'settings.terminal.scrollback.rows': 'Number of rows *',
   'settings.terminal.keywordHighlight.title': 'Keyword highlighting',
   'settings.terminal.keywordHighlight.resetColors': 'Reset to default colors',
+  'settings.terminal.keywordHighlight.addCustom': 'Add Custom Rule',
+  'settings.terminal.keywordHighlight.editCustom': 'Edit Rule',
+  'settings.terminal.keywordHighlight.labelField': 'Label & Color',
+  'settings.terminal.keywordHighlight.labelPlaceholder': 'Label (e.g., Down)',
+  'settings.terminal.keywordHighlight.patternField': 'Regex Pattern',
+  'settings.terminal.keywordHighlight.patternPlaceholder': 'Regex (e.g., \\bdown\\b)',
+  'settings.terminal.keywordHighlight.invalidPattern': 'Invalid regex pattern',
+  'settings.terminal.keywordHighlight.preview': 'Preview',
   'settings.terminal.section.localShell': 'Local Shell',
   'settings.terminal.localShell.shell': 'Shell executable',
   'settings.terminal.localShell.shell.desc': 'Path to the shell executable (e.g., /bin/zsh, pwsh.exe). Leave empty for system default.',
@@ -355,6 +364,13 @@ const en: Messages = {
   'settings.terminal.rendering.renderer.desc': 'Choose the terminal rendering technology. Auto will use Canvas on low-memory devices. Changes take effect on new terminal sessions.',
   'settings.terminal.rendering.auto': 'Auto',
 
+  // Settings > Terminal > Workspace Focus Indicator
+  'settings.terminal.section.workspaceFocus': 'Workspace Focus Indicator',
+  'settings.terminal.workspaceFocus.style': 'Focus indicator style',
+  'settings.terminal.workspaceFocus.style.desc': 'How to indicate which pane is focused in split view.',
+  'settings.terminal.workspaceFocus.dim': 'Dim unfocused panes',
+  'settings.terminal.workspaceFocus.border': 'Border on focused pane',
+
   // Settings > Terminal > Autocomplete
   'settings.terminal.section.autocomplete': 'Autocomplete',
   'settings.terminal.autocomplete.enabled': 'Enable autocomplete',
@@ -454,8 +470,24 @@ const en: Messages = {
   'vault.groups.placeholder.example': 'e.g. Production',
   'vault.groups.parentLabel': 'Parent',
   'vault.groups.pathLabel': 'Path',
+  'vault.groups.settings': 'Group Settings',
+  'vault.groups.details': 'Group Details',
+  'vault.groups.details.general': 'General',
+  'vault.groups.details.ssh': 'SSH',
+  'vault.groups.details.telnet': 'Telnet',
+  'vault.groups.details.advanced': 'Advanced',
+  'vault.groups.details.appearance': 'Appearance',
+  'vault.groups.details.mosh': 'Mosh',
+  'vault.groups.details.parentGroup': 'Parent Group',
+  'vault.groups.details.none': 'None',
+  'vault.groups.details.inherited': 'Inherited from group',
+  'vault.groups.details.addProtocol': 'Add Protocol',
+  'vault.groups.details.removeProtocol': 'Remove Protocol',
+  'vault.groups.details.fontFamily': 'Font Family',
+  'vault.groups.details.fontSize': 'Font Size',
   'vault.groups.errors.required': 'Group name is required.',
   'vault.groups.errors.invalidChars': "Group name cannot include '/' or '\\\\'.",
+  'vault.groups.errors.duplicatePath': 'A group with this name already exists at this location.',
 
   'vault.managedSource.unmanage': 'Unmanage',
   'vault.managedSource.unmanageSuccess': 'Successfully unmanaged group',
@@ -479,6 +511,10 @@ const en: Messages = {
   'vault.hosts.export.toast.successWithSkipped': 'Exported {count} hosts to CSV ({skipped} unsupported hosts skipped)',
   'vault.hosts.export.toast.noHosts': 'No hosts to export',
   'vault.hosts.allHosts': 'All hosts',
+  'vault.hosts.pinned': 'Pinned',
+  'vault.hosts.recentlyConnected': 'Recently Connected',
+  'vault.hosts.pinToTop': 'Pin to Top',
+  'vault.hosts.unpin': 'Unpin',
   'vault.hosts.copyCredentials': 'Copy Credentials',
   'vault.hosts.copyCredentials.toast.success': 'Credentials copied to clipboard',
   'vault.hosts.copyCredentials.toast.noPassword': 'No password saved for this host',
@@ -631,8 +667,21 @@ const en: Messages = {
   'sftp.dragDropToUpload': 'Drag and drop files here to upload',
   'sftp.retry': 'Retry',
   'sftp.context.open': 'Open',
+  'sftp.context.navigateTo': 'Navigate to',
+  'sftp.context.moveTo': 'Move to...',
+  'sftp.context.moveToParent': 'Move to parent directory',
+  'sftp.moveTo.title': 'Move to directory',
+  'sftp.moveTo.placeholder': 'Enter target directory path',
+  'sftp.moveTo.confirm': 'Move',
+  'sftp.moveTo.pathNotFound': 'Directory not found or inaccessible',
   'sftp.context.download': 'Download',
   'sftp.context.copyToOtherPane': 'Copy to other pane',
+  'sftp.viewMode.label': 'View mode',
+  'sftp.viewMode.list': 'List view',
+  'sftp.viewMode.tree': 'Tree view',
+  'sftp.tree.loadError': 'Failed to load directory',
+  'sftp.tree.loading': 'Loading...',
+  'sftp.kind.folder': 'Folder',
   'sftp.context.rename': 'Rename',
   'sftp.context.permissions': 'Permissions',
   'sftp.context.delete': 'Delete',
@@ -653,6 +702,13 @@ const en: Messages = {
   'sftp.transfers.active': '{count} active',
   'sftp.transfers.clearCompleted': 'Clear completed',
   'sftp.transfers.calculatingTotal': 'Calculating total size...',
+  'sftp.transfers.filesCount': '{count} files',
+  'sftp.transfers.filesProgress': '{current}/{total} files',
+  'sftp.transfers.expandChildren': 'Show files',
+  'sftp.transfers.collapseChildren': 'Hide files',
+  'sftp.transfers.expandChildList': 'Show detail',
+  'sftp.transfers.collapseChildList': 'Hide',
+  'sftp.transfers.dragToResize': 'Drag to resize',
   'sftp.goUp': 'Go up',
   'sftp.goToTerminalCwd': 'Go to terminal directory',
   'sftp.encoding.label': 'Filename Encoding',
@@ -672,6 +728,9 @@ const en: Messages = {
   'sftp.deleteConfirm.single': 'Delete "{name}"?',
   'sftp.deleteConfirm.title': 'Delete {count} item(s)?',
   'sftp.deleteConfirm.desc': 'This action cannot be undone. The following will be deleted:',
+  'sftp.deleteConfirm.descSingle': 'This action cannot be undone.',
+  'sftp.deleteConfirm.host': 'Host',
+  'sftp.deleteConfirm.path': 'Path',
   'sftp.error.loadFailed': 'Failed to load directory',
   'sftp.error.downloadFailed': 'Download failed',
   'sftp.error.uploadFailed': 'Upload failed',
@@ -763,6 +822,15 @@ const en: Messages = {
 
   // Settings > SFTP File Associations
   'settings.tab.sftpFileAssociations': 'SFTP',
+  'settings.sftp.transferConcurrency': 'Transfer Concurrency',
+  'settings.sftp.transferConcurrency.desc': 'Number of files to transfer in parallel when uploading or downloading folders. Higher values may improve speed but can overwhelm some servers.',
+  'settings.sftp.defaultOpener': 'Default File Opener',
+  'settings.sftp.defaultOpener.desc': 'Choose the default application for opening files without a specific file association',
+  'settings.sftp.defaultOpener.ask': 'Always ask',
+  'settings.sftp.defaultOpener.askDesc': 'Show a dialog to choose an application each time',
+  'settings.sftp.defaultOpener.builtInDesc': 'Open text files in the built-in editor by default',
+  'settings.sftp.defaultOpener.systemApp': 'Choose Application...',
+  'settings.sftp.defaultOpener.systemAppDesc': 'Open files with a specific application by default',
   'settings.sftpFileAssociations.title': 'SFTP File Associations',
   'settings.sftpFileAssociations.desc': 'Configure default applications for opening files by extension',
   'settings.sftpFileAssociations.extension': 'Extension',
@@ -791,6 +859,13 @@ const en: Messages = {
   'settings.sftp.autoOpenSidebar.enable': 'Enable auto-open sidebar',
   'settings.sftp.autoOpenSidebar.enableDesc': 'The SFTP sidebar will open automatically when a terminal session connects to a remote host',
 
+  'settings.sftp.defaultViewMode': 'Default View Mode',
+  'settings.sftp.defaultViewMode.desc': 'Choose the default view mode when opening a new SFTP tab. Per-host preferences override this setting.',
+  'settings.sftp.defaultViewMode.list': 'List View',
+  'settings.sftp.defaultViewMode.listDesc': 'Display files in a flat list for the current directory',
+  'settings.sftp.defaultViewMode.tree': 'Tree View',
+  'settings.sftp.defaultViewMode.treeDesc': 'Display files in a hierarchical tree structure',
+
   'sftp.autoSync.success': 'File synced to remote: {fileName}',
   'sftp.autoSync.error': 'Failed to sync file: {error}',
 
@@ -925,6 +1000,10 @@ const en: Messages = {
   'hostDetails.agentForwarding.agentNotRunning': 'SSH Agent is not available',
   'hostDetails.agentForwarding.agentNotRunningHint': 'No SSH agent detected. Enable OpenSSH Authentication Agent in Windows Services, or use a compatible agent such as Bitwarden, 1Password, or gpg-agent.',
   'hostDetails.section.agentForwarding': 'SSH Agent',
+  'hostDetails.section.deviceType': 'Device Type',
+  'hostDetails.deviceType': 'Network Device Mode',
+  'hostDetails.deviceType.desc': 'Enable for network equipment (switches, routers, firewalls) connected via SSH. Commands are sent as-is without shell wrapping, compatible with vendor CLIs like Huawei VRP and Cisco IOS.',
+  'hostDetails.deviceType.warning': 'AI agent commands will be sent directly without exit code tracking. Only enable for devices that do not run a standard shell.',
   'hostDetails.section.legacyAlgorithms': 'Legacy Algorithms',
   'hostDetails.legacyAlgorithms': 'Allow Legacy Algorithms',
   'hostDetails.legacyAlgorithms.desc': 'Enable deprecated SSH algorithms (diffie-hellman-group1, ssh-dss, 3des-cbc, etc.) for connecting to older network equipment.',
@@ -1533,6 +1612,7 @@ const en: Messages = {
   'serial.field.localEchoDesc': 'Echo typed characters locally (for devices without remote echo)',
   'serial.field.lineMode': 'Line Mode',
   'serial.field.lineModeDesc': 'Buffer input and send on Enter (instead of character-by-character)',
+  'serial.field.charset': 'Charset',
   'serial.connectionError': 'Failed to connect to serial port',
   'serial.field.baudRatePlaceholder': 'Select or enter baud rate...',
   'serial.field.baudRateEmpty': 'Enter a custom baud rate',
@@ -1636,6 +1716,17 @@ const en: Messages = {
   'ai.claude.customPathPlaceholder': 'e.g. /usr/local/bin/claude',
   'ai.claude.check': 'Check',
 
+  // AI GitHub Copilot CLI
+  'ai.copilot.title': 'GitHub Copilot CLI',
+  'ai.copilot.description': 'Uses GitHub Copilot CLI via ACP over stdio (`copilot --acp --stdio`). Once detected, it can be selected as an external coding agent.',
+  'ai.copilot.detecting': 'Detecting...',
+  'ai.copilot.detected': 'Detected',
+  'ai.copilot.notFound': 'Not found',
+  'ai.copilot.path': 'Path:',
+  'ai.copilot.notFoundHint': 'Could not find copilot in PATH. Install it or specify the executable path below.',
+  'ai.copilot.customPathPlaceholder': 'e.g. /usr/local/bin/copilot',
+  'ai.copilot.check': 'Check',
+
   // AI Default Agent
   'ai.defaultAgent': 'Default Agent',
   'ai.defaultAgent.description': 'Agent to use when starting a new AI session',

application/i18n/locales/zh-CN.ts

@@ -13,6 +13,7 @@ const zhCN: Messages = {
   'common.connect': '连接',
   'common.terminal': '终端',
   'common.create': '创建',
+  'common.add': '添加',
   'common.rename': '重命名',
   'common.refresh': '刷新',
   'common.continue': '继续',
@@ -180,6 +181,9 @@ const zhCN: Messages = {
   'settings.application.github.subtitle': '源代码',
   'settings.application.whatsNew': '更新内容',
   'settings.application.whatsNew.subtitle': '查看发布说明',
+  'settings.vault.title': '主机库',
+  'settings.vault.showRecentHosts': '显示最近连接的主机',
+  'settings.vault.showRecentHostsDesc': '在主机列表顶部显示最近连接过的主机',
 
   // Update notifications
   'update.available.title': '发现新版本',
@@ -215,9 +219,6 @@ 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':
@@ -294,8 +295,24 @@ const zhCN: Messages = {
   'vault.groups.placeholder.example': '例如：Production',
   'vault.groups.parentLabel': '父级',
   'vault.groups.pathLabel': '路径',
+  'vault.groups.settings': '分组设置',
+  'vault.groups.details': '分组详情',
+  'vault.groups.details.general': '常规',
+  'vault.groups.details.ssh': 'SSH',
+  'vault.groups.details.telnet': 'Telnet',
+  'vault.groups.details.advanced': '高级',
+  'vault.groups.details.appearance': '外观',
+  'vault.groups.details.mosh': 'Mosh',
+  'vault.groups.details.parentGroup': '父分组',
+  'vault.groups.details.none': '无',
+  'vault.groups.details.inherited': '继承自分组',
+  'vault.groups.details.addProtocol': '添加协议',
+  'vault.groups.details.removeProtocol': '移除协议',
+  'vault.groups.details.fontFamily': '字体',
+  'vault.groups.details.fontSize': '字号',
   'vault.groups.errors.required': '分组名称不能为空。',
   'vault.groups.errors.invalidChars': "分组名称不能包含 '/' 或 '\\\\'.",
+  'vault.groups.errors.duplicatePath': '该位置已存在同名分组。',
 
   'vault.managedSource.unmanage': '取消托管',
   'vault.managedSource.unmanageSuccess': '已取消托管分组',
@@ -319,6 +336,10 @@ const zhCN: Messages = {
   'vault.hosts.export.toast.successWithSkipped': '已导出 {count} 个主机到 CSV（跳过 {skipped} 个不支持的主机）',
   'vault.hosts.export.toast.noHosts': '没有主机可导出',
   'vault.hosts.allHosts': '全部主机',
+  'vault.hosts.pinned': '已置顶',
+  'vault.hosts.recentlyConnected': '最近连接',
+  'vault.hosts.pinToTop': '置顶',
+  'vault.hosts.unpin': '取消置顶',
   'vault.hosts.copyCredentials': '复制账密信息',
   'vault.hosts.copyCredentials.toast.success': '账密信息已复制到剪贴板',
   'vault.hosts.copyCredentials.toast.noPassword': '该主机未保存密码',
@@ -446,8 +467,21 @@ const zhCN: Messages = {
   'sftp.dragDropToUpload': '拖拽文件到这里上传',
   'sftp.retry': '重试',
   'sftp.context.open': '打开',
+  'sftp.context.navigateTo': '跳转到这里',
+  'sftp.context.moveTo': '移动到...',
+  'sftp.context.moveToParent': '移动到上级目录',
+  'sftp.moveTo.title': '移动到目录',
+  'sftp.moveTo.placeholder': '输入目标目录路径',
+  'sftp.moveTo.confirm': '移动',
+  'sftp.moveTo.pathNotFound': '目录不存在或无法访问',
   'sftp.context.download': '下载',
   'sftp.context.copyToOtherPane': '复制到另一侧',
+  'sftp.viewMode.label': '视图模式',
+  'sftp.viewMode.list': '列表视图',
+  'sftp.viewMode.tree': '树形视图',
+  'sftp.tree.loadError': '加载目录失败',
+  'sftp.tree.loading': '加载中...',
+  'sftp.kind.folder': '文件夹',
   'sftp.context.rename': '重命名',
   'sftp.context.permissions': '权限',
   'sftp.context.delete': '删除',
@@ -468,6 +502,13 @@ const zhCN: Messages = {
   'sftp.transfers.active': '{count} 个进行中',
   'sftp.transfers.clearCompleted': '清除已完成',
   'sftp.transfers.calculatingTotal': '正在统计总大小...',
+  'sftp.transfers.filesCount': '{count} 个文件',
+  'sftp.transfers.filesProgress': '{current}/{total} 个文件',
+  'sftp.transfers.expandChildren': '展开文件',
+  'sftp.transfers.collapseChildren': '收起文件',
+  'sftp.transfers.expandChildList': '展开详情',
+  'sftp.transfers.collapseChildList': '收起',
+  'sftp.transfers.dragToResize': '拖拽调整高度',
   'sftp.goUp': '上一级',
   'sftp.goToTerminalCwd': '定位到终端当前目录',
   'sftp.encoding.label': '文件名编码',
@@ -487,6 +528,9 @@ const zhCN: Messages = {
   'sftp.deleteConfirm.single': '删除 "{name}"？',
   'sftp.deleteConfirm.title': '删除 {count} 个项目？',
   'sftp.deleteConfirm.desc': '此操作不可撤销，将删除以下内容：',
+  'sftp.deleteConfirm.descSingle': '此操作不可撤销。',
+  'sftp.deleteConfirm.host': '主机',
+  'sftp.deleteConfirm.path': '路径',
   'sftp.error.loadFailed': '加载目录失败',
   'sftp.error.downloadFailed': '下载失败',
   'sftp.error.uploadFailed': '上传失败',
@@ -604,6 +648,10 @@ const zhCN: Messages = {
   'hostDetails.agentForwarding.agentNotRunning': 'SSH Agent 不可用',
   'hostDetails.agentForwarding.agentNotRunningHint': '未检测到 SSH Agent。请启用 Windows OpenSSH Authentication Agent 服务，或使用兼容的 Agent（如 Bitwarden、1Password、gpg-agent）。',
   'hostDetails.section.agentForwarding': 'SSH 代理',
+  'hostDetails.section.deviceType': '设备类型',
+  'hostDetails.deviceType': '网络设备模式',
+  'hostDetails.deviceType.desc': '适用于通过 SSH 连接的网络设备（交换机、路由器、防火墙）。命令将原样发送，不进行 Shell 包装，兼容华为 VRP、Cisco IOS 等厂商 CLI。',
+  'hostDetails.deviceType.warning': 'AI 代理命令将直接发送，无法获取退出码。仅建议在设备不运行标准 Shell 时启用。',
   'hostDetails.section.legacyAlgorithms': '旧版算法',
   'hostDetails.legacyAlgorithms': '允许旧版算法',
   'hostDetails.legacyAlgorithms.desc': '启用已弃用的 SSH 算法（diffie-hellman-group1、ssh-dss、3des-cbc 等）以连接老旧网络设备。',
@@ -1095,6 +1143,15 @@ const zhCN: Messages = {
 
   // Settings > SFTP File Associations
   'settings.tab.sftpFileAssociations': 'SFTP',
+  'settings.sftp.transferConcurrency': '传输并发数',
+  'settings.sftp.transferConcurrency.desc': '上传或下载文件夹时并行传输的文件数量。较高的值可能提高速度，但可能导致某些服务器过载。',
+  'settings.sftp.defaultOpener': '默认文件打开方式',
+  'settings.sftp.defaultOpener.desc': '选择没有特定文件关联时的默认打开方式',
+  'settings.sftp.defaultOpener.ask': '每次询问',
+  'settings.sftp.defaultOpener.askDesc': '每次打开文件时弹出选择对话框',
+  'settings.sftp.defaultOpener.builtInDesc': '默认使用内置编辑器打开文本文件',
+  'settings.sftp.defaultOpener.systemApp': '选择应用程序...',
+  'settings.sftp.defaultOpener.systemAppDesc': '默认使用指定的外部应用程序打开文件',
   'settings.sftpFileAssociations.title': 'SFTP 文件关联',
   'settings.sftpFileAssociations.desc': '配置按扩展名打开文件的默认应用程序',
   'settings.sftpFileAssociations.extension': '扩展名',
@@ -1123,6 +1180,13 @@ const zhCN: Messages = {
   'settings.sftp.autoOpenSidebar.enable': '启用自动打开侧栏',
   'settings.sftp.autoOpenSidebar.enableDesc': '当终端会话连接到远程主机时，SFTP 侧栏将自动打开',
 
+  'settings.sftp.defaultViewMode': '默认视图模式',
+  'settings.sftp.defaultViewMode.desc': '选择打开新 SFTP 标签页时的默认视图模式。每个主机的偏好设置会覆盖此全局设置。',
+  'settings.sftp.defaultViewMode.list': '列表视图',
+  'settings.sftp.defaultViewMode.listDesc': '以平面列表显示当前目录的文件',
+  'settings.sftp.defaultViewMode.tree': '树形视图',
+  'settings.sftp.defaultViewMode.treeDesc': '以层级树形结构显示文件',
+
   'sftp.autoSync.success': '文件已同步到远程：{fileName}',
   'sftp.autoSync.error': '同步文件失败：{error}',
 
@@ -1240,6 +1304,14 @@ const zhCN: Messages = {
   'settings.terminal.scrollback.rows': '行数 *',
   'settings.terminal.keywordHighlight.title': '关键字高亮',
   'settings.terminal.keywordHighlight.resetColors': '重置为默认颜色',
+  'settings.terminal.keywordHighlight.addCustom': '添加自定义规则',
+  'settings.terminal.keywordHighlight.editCustom': '编辑规则',
+  'settings.terminal.keywordHighlight.labelField': '标签与颜色',
+  'settings.terminal.keywordHighlight.labelPlaceholder': '标签（如 Down）',
+  'settings.terminal.keywordHighlight.patternField': '正则表达式',
+  'settings.terminal.keywordHighlight.patternPlaceholder': '正则表达式（如 \\bdown\\b）',
+  'settings.terminal.keywordHighlight.invalidPattern': '无效的正则表达式',
+  'settings.terminal.keywordHighlight.preview': '预览',
   'settings.terminal.section.localShell': '本地 Shell',
   'settings.terminal.localShell.shell': 'Shell 可执行文件',
   'settings.terminal.localShell.shell.desc': 'Shell 可执行文件的路径（例如 /bin/zsh、pwsh.exe）。留空使用系统默认。',
@@ -1547,6 +1619,7 @@ const zhCN: Messages = {
   'serial.field.localEchoDesc': '本地回显输入字符（用于没有远程回显的设备）',
   'serial.field.lineMode': '行模式',
   'serial.field.lineModeDesc': '缓冲输入，按回车后发送（而不是逐字符发送）',
+  'serial.field.charset': '字符编码',
   'serial.connectionError': '连接串口失败',
   'serial.field.baudRatePlaceholder': '选择或输入波特率...',
   'serial.field.baudRateEmpty': '输入自定义波特率',
@@ -1650,6 +1723,17 @@ const zhCN: Messages = {
   'ai.claude.customPathPlaceholder': '例如 /usr/local/bin/claude',
   'ai.claude.check': '检查',
 
+  // AI GitHub Copilot CLI
+  'ai.copilot.title': 'GitHub Copilot CLI',
+  'ai.copilot.description': '通过 ACP over stdio（`copilot --acp --stdio`）接入 GitHub Copilot CLI。检测到后即可作为外部编程 Agent 使用。',
+  'ai.copilot.detecting': '检测中...',
+  'ai.copilot.detected': '已检测到',
+  'ai.copilot.notFound': '未找到',
+  'ai.copilot.path': '路径：',
+  'ai.copilot.notFoundHint': '在 PATH 中未找到 copilot。请安装或在下方指定可执行文件路径。',
+  'ai.copilot.customPathPlaceholder': '例如 /usr/local/bin/copilot',
+  'ai.copilot.check': '检查',
+
   // AI Default Agent
   'ai.defaultAgent': '默认 Agent',
   'ai.defaultAgent.description': '创建新 AI 会话时使用的 Agent',

application/state/activeTabStore.ts

@@ -6,6 +6,7 @@ type Listener = () => void;
 class ActiveTabStore {
   private activeTabId: string = 'vault';
   private listeners = new Set<Listener>();
+  private pendingNotify = false;
 
   getActiveTabId = () => this.activeTabId;
 
@@ -13,7 +14,10 @@ class ActiveTabStore {
     if (this.activeTabId !== id) {
       this.activeTabId = id;
       // Defer listener notification to avoid "setState during render" if called from a render phase
+      if (this.pendingNotify) return;
+      this.pendingNotify = true;
       Promise.resolve().then(() => {
+        this.pendingNotify = false;
         this.listeners.forEach(listener => listener());
       });
     }

application/state/sftp/types.ts

@@ -12,6 +12,7 @@ export interface SftpPane {
   filter: string;
   filenameEncoding: SftpFilenameEncoding;
   showHiddenFiles: boolean;
+  transferMutationToken: number;
 }
 
 // Multi-tab state for left and right sides
@@ -39,6 +40,7 @@ export const createEmptyPane = (
   filter: "",
   filenameEncoding: "auto",
   showHiddenFiles,
+  transferMutationToken: 0,
 });
 
 // File watch event types

application/state/sftp/useSftpConnections.ts

@@ -88,6 +88,8 @@ export const useSftpConnections = ({
 
       if (!activeTabId) return;
 
+      const isReconnectAttempt = reconnectingRef.current[side];
+
       // Notify caller of the tab ID synchronously, before any async work.
       // This allows callers to map metadata (e.g. connection keys) to the tab
       // immediately, avoiding race conditions with deferred effects.
@@ -466,7 +468,11 @@ export const useSftpConnections = ({
                   error: err instanceof Error ? err.message : "Connection failed",
                 }
               : null,
-            error: err instanceof Error ? err.message : "Connection failed",
+            files: isReconnectAttempt ? [] : prev.files,
+            selectedFiles: isReconnectAttempt ? new Set<string>() : prev.selectedFiles,
+            error: isReconnectAttempt
+              ? "sftp.error.reconnectFailed"
+              : (err instanceof Error ? err.message : "Connection failed"),
             loading: false,
             reconnecting: false,
           }));
@@ -496,32 +502,39 @@ export const useSftpConnections = ({
       !initialConnectDoneRef.current &&
       leftTabs.tabs.length === 0
     ) {
-      initialConnectDoneRef.current = true;
-      setTimeout(() => {
+      const timer = window.setTimeout(() => {
+        initialConnectDoneRef.current = true;
         connect("left", "local");
       }, 0);
+      return () => window.clearTimeout(timer);
     }
   }, [autoConnectLocalOnMount, connect, leftTabs.tabs.length]);
 
   useEffect(() => {
-    const attemptReconnect = async (side: "left" | "right") => {
+    const reconnectTimers: number[] = [];
+
+    const scheduleReconnect = (side: "left" | "right") => {
       const lastHost = lastConnectedHostRef.current[side];
-      if (lastHost && reconnectingRef.current[side]) {
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-        if (reconnectingRef.current[side]) {
-          connect(side, lastHost);
-        }
-      }
+      if (!lastHost || !reconnectingRef.current[side]) return;
+
+      const timer = window.setTimeout(() => {
+        if (!reconnectingRef.current[side]) return;
+        void connect(side, lastHost);
+      }, 1000);
+      reconnectTimers.push(timer);
     };
 
     if (leftPane.reconnecting && reconnectingRef.current.left) {
-      attemptReconnect("left");
+      scheduleReconnect("left");
     }
     if (rightPane.reconnecting && reconnectingRef.current.right) {
-      attemptReconnect("right");
+      scheduleReconnect("right");
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [leftPane.reconnecting, rightPane.reconnecting, connect]);
+
+    return () => {
+      reconnectTimers.forEach((timer) => window.clearTimeout(timer));
+    };
+  }, [leftPane.reconnecting, rightPane.reconnecting, connect, lastConnectedHostRef, reconnectingRef]);
 
   const disconnect = useCallback(
     async (side: "left" | "right") => {

application/state/sftp/useSftpExternalOperations.ts

@@ -45,7 +45,8 @@ interface SftpExternalOperationsResult {
   activeFileWatchCountRef: React.MutableRefObject<number>;
   uploadExternalFiles: (
     side: "left" | "right",
-    dataTransfer: DataTransfer
+    dataTransfer: DataTransfer,
+    targetPath?: string
   ) => Promise<UploadResult[]>;
   uploadExternalEntries: (
     side: "left" | "right",
@@ -377,6 +378,7 @@ export const useSftpExternalOperations = (
             speed: 0,
             startTime: Date.now(),
             isDirectory: true,
+            progressMode: "bytes",
           };
           addExternalUpload(scanningTask);
         }
@@ -404,6 +406,8 @@ export const useSftpExternalOperations = (
             speed: 0,
             startTime: Date.now(),
             isDirectory: task.isDirectory,
+            progressMode: task.progressMode ?? "bytes",
+            parentTaskId: task.parentTaskId,
           };
           addExternalUpload(transferTask);
         }
@@ -505,7 +509,7 @@ export const useSftpExternalOperations = (
   }, []);
 
   const uploadExternalFiles = useCallback(
-    async (side: "left" | "right", dataTransfer: DataTransfer): Promise<UploadResult[]> => {
+    async (side: "left" | "right", dataTransfer: DataTransfer, targetPath?: string): Promise<UploadResult[]> => {
       const pane = getActivePane(side);
       if (!pane?.connection) {
         throw new Error("No active connection");
@@ -525,13 +529,14 @@ export const useSftpExternalOperations = (
       }
 
       const uploadPaneId = pane.id;
+      const uploadTargetPath = targetPath || pane.connection.currentPath;
       // Create a new upload controller for this upload
       const controller = new UploadController();
       uploadControllerRef.current = controller;
 
       const callbacks = createUploadCallbacks(
         pane.connection.id,
-        pane.connection.currentPath,
+        uploadTargetPath,
         pane.connection.isLocal ? undefined : pane.connection.hostId,
         pane.connection.isLocal ? undefined : connectionCacheKeyMapRef.current.get(pane.connection.id),
       );
@@ -540,7 +545,7 @@ export const useSftpExternalOperations = (
         const results = await uploadFromDataTransfer(
           dataTransfer,
           {
-            targetPath: pane.connection.currentPath,
+            targetPath: uploadTargetPath,
             sftpId,
             isLocal: pane.connection.isLocal,
             bridge: createUploadBridge,
@@ -551,7 +556,14 @@ export const useSftpExternalOperations = (
           controller
         );
 
-        await refresh(side, { tabId: uploadPaneId });
+        // Invalidate cache for the upload target so returning to that path
+        // triggers a fresh listing.
+        if (clearDirCacheEntry && targetPath) {
+          clearDirCacheEntry(pane.connection.id, uploadTargetPath);
+        }
+        if (uploadTargetPath === pane.connection.currentPath) {
+          await refresh(side, { tabId: uploadPaneId });
+        }
         return results;
       } catch (error) {
         logger.error("[SFTP] Upload failed:", error);
@@ -561,6 +573,7 @@ export const useSftpExternalOperations = (
       }
     },
     [
+      clearDirCacheEntry,
       connectionCacheKeyMapRef,
       getActivePane,
       refresh,
@@ -634,7 +647,9 @@ export const useSftpExternalOperations = (
         if (clearDirCacheEntry) {
           clearDirCacheEntry(pane.connection.id, uploadTargetPath);
         }
-        await refresh(side, { tabId: uploadPaneId });
+        if (uploadTargetPath === pane.connection.currentPath) {
+          await refresh(side, { tabId: uploadPaneId });
+        }
         return results;
       } catch (error) {
         logger.error("[SFTP] Upload failed:", error);

application/state/sftp/useSftpPaneActions.ts

@@ -3,9 +3,12 @@ import type { Host, SftpFileEntry, SftpFilenameEncoding } from "../../../domain/
 import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
 import { logger } from "../../../lib/logger";
 import { SftpPane } from "./types";
-import { getParentPath, isNavigableDirectory, isWindowsRoot, joinPath } from "./utils";
+import { getFileName, getParentPath, isNavigableDirectory, isWindowsRoot, joinPath } from "./utils";
 import { buildCacheKey, setSharedRemoteHostCache } from "./sharedRemoteHostCache";
 
+/** Shared empty set for navigation resets — never mutate this. */
+const EMPTY_SET = new Set<string>();
+
 interface UseSftpPaneActionsParams {
   hosts: Host[];
   getActivePane: (side: "left" | "right") => SftpPane | null;
@@ -25,6 +28,7 @@ interface UseSftpPaneActionsParams {
   listRemoteFiles: (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => Promise<SftpFileEntry[]>;
   handleSessionError: (side: "left" | "right", error: Error) => void;
   isSessionError: (err: unknown) => boolean;
+  clearSelectionsExcept: (target: { side: "left" | "right"; tabId: string } | null) => void;
   dirCacheTtlMs: number;
 }
 
@@ -40,7 +44,9 @@ interface UseSftpPaneActionsResult {
   setFilter: (side: "left" | "right", filter: string) => void;
   getFilteredFiles: (pane: SftpPane) => SftpFileEntry[];
   createDirectory: (side: "left" | "right", name: string) => Promise<void>;
+  createDirectoryAtPath: (side: "left" | "right", path: string, name: string) => Promise<void>;
   createFile: (side: "left" | "right", name: string) => Promise<void>;
+  createFileAtPath: (side: "left" | "right", path: string, name: string) => Promise<void>;
   deleteFiles: (side: "left" | "right", fileNames: string[]) => Promise<void>;
   deleteFilesAtPath: (
     side: "left" | "right",
@@ -49,6 +55,8 @@ interface UseSftpPaneActionsResult {
     fileNames: string[],
   ) => Promise<void>;
   renameFile: (side: "left" | "right", oldName: string, newName: string) => Promise<void>;
+  renameFileAtPath: (side: "left" | "right", oldPath: string, newName: string) => Promise<void>;
+  moveEntriesToPath: (side: "left" | "right", sourcePaths: string[], targetPath: string) => Promise<void>;
   changePermissions: (side: "left" | "right", filePath: string, mode: string) => Promise<void>;
 }
 
@@ -71,8 +79,39 @@ export const useSftpPaneActions = ({
   listRemoteFiles,
   handleSessionError,
   isSessionError,
+  clearSelectionsExcept,
   dirCacheTtlMs,
 }: UseSftpPaneActionsParams): UseSftpPaneActionsResult => {
+  const normalizePathForCompare = useCallback((path: string): string => {
+    if (isWindowsRoot(path)) return path.replace(/\//g, "\\").toLowerCase();
+    if (/^[A-Za-z]:/.test(path)) {
+      return path.replace(/\//g, "\\").replace(/[\\]+$/, "").toLowerCase();
+    }
+    if (path === "/") return "/";
+    return path.replace(/\/+$/, "");
+  }, []);
+
+  const isSamePath = useCallback((a: string, b: string): boolean => {
+    return normalizePathForCompare(a) === normalizePathForCompare(b);
+  }, [normalizePathForCompare]);
+
+  const isDescendantPath = useCallback((candidate: string, parent: string): boolean => {
+    const normalizedCandidate = normalizePathForCompare(candidate);
+    const normalizedParent = normalizePathForCompare(parent);
+    if (normalizedCandidate === normalizedParent) return false;
+
+    if (/^[a-z]:\\$/.test(normalizedParent)) {
+      return normalizedCandidate.startsWith(normalizedParent);
+    }
+
+    if (normalizedParent === "/") {
+      return normalizedCandidate.startsWith("/");
+    }
+
+    const separator = normalizedParent.includes("\\") ? "\\" : "/";
+    return normalizedCandidate.startsWith(`${normalizedParent}${separator}`);
+  }, [normalizePathForCompare]);
+
   // Build the shared cache key for the active pane. Prefer the last connected
   // host (which includes session-time overrides), fall back to the vault hosts list.
   const hostsRef = useRef(hosts);
@@ -146,7 +185,7 @@ export const useSftpPaneActions = ({
           connectionId,
           path,
           files: cached.files,
-          selectedFiles: new Set(),
+          selectedFiles: EMPTY_SET,
         });
         updateTab(side, targetTabId, (prev) => ({
           ...prev,
@@ -156,7 +195,7 @@ export const useSftpPaneActions = ({
           files: cached.files,
           loading: false,
           error: null,
-          selectedFiles: new Set(),
+          selectedFiles: EMPTY_SET,
         }));
         if (!pane.connection.isLocal) {
           // Use hostId as the shared cache key — this is safe because the
@@ -200,7 +239,7 @@ export const useSftpPaneActions = ({
         connection: prev.connection
           ? { ...prev.connection, currentPath: path }
           : null,
-        selectedFiles: new Set(),
+        selectedFiles: EMPTY_SET,
         loading: true,
         error: null,
       }));
@@ -270,7 +309,7 @@ export const useSftpPaneActions = ({
           connectionId,
           path,
           files,
-          selectedFiles: new Set(),
+          selectedFiles: EMPTY_SET,
         });
 
         updateTab(side, targetTabId, (prev) => ({
@@ -280,7 +319,7 @@ export const useSftpPaneActions = ({
             : null,
           files,
           loading: false,
-          selectedFiles: new Set(),
+          selectedFiles: EMPTY_SET,
         }));
         if (!pane.connection.isLocal) {
           setSharedRemoteHostCache(getActivePaneCacheKey(side, pane.connection.hostId, pane.connection.id), {
@@ -340,6 +379,25 @@ export const useSftpPaneActions = ({
         ? sideTabs.tabs.find((t) => t.id === options.tabId) ?? null
         : getActivePane(side);
       if (pane?.connection) {
+        const hasRemoteSession = pane.connection.isLocal || sftpSessionsRef.current.has(pane.connection.id);
+        if (!hasRemoteSession) {
+          if (options?.tabId) return;
+          const lastHost = lastConnectedHostRef.current[side];
+          if (lastHost && !reconnectingRef.current[side]) {
+            reconnectingRef.current[side] = true;
+            updateActiveTab(side, (prev) => ({
+              ...prev,
+              reconnecting: true,
+              error: "sftp.reconnecting.title",
+            }));
+          } else if (!lastHost) {
+            updateActiveTab(side, (prev) => ({
+              ...prev,
+              error: "sftp.error.connectionLostManual",
+            }));
+          }
+          return;
+        }
         await navigateTo(side, pane.connection.currentPath, { force: true, tabId: options?.tabId });
       } else if (!pane?.connection && pane?.error) {
         // For background tabs, don't trigger reconnection (it operates on
@@ -362,7 +420,7 @@ export const useSftpPaneActions = ({
         }
       }
     },
-    [getActivePane, leftTabsRef, rightTabsRef, navigateTo, updateActiveTab, lastConnectedHostRef, reconnectingRef],
+    [getActivePane, leftTabsRef, rightTabsRef, navigateTo, updateActiveTab, lastConnectedHostRef, reconnectingRef, sftpSessionsRef],
   );
 
   const navigateUp = useCallback(
@@ -409,6 +467,10 @@ export const useSftpPaneActions = ({
 
   const toggleSelection = useCallback(
     (side: "left" | "right", fileName: string, multiSelect: boolean) => {
+      const activeTabId = (side === "left" ? leftTabsRef : rightTabsRef).current.activeTabId;
+      if (activeTabId) {
+        clearSelectionsExcept({ side, tabId: activeTabId });
+      }
       updateActiveTab(side, (prev) => {
         const newSelection = new Set(multiSelect ? prev.selectedFiles : []);
         if (newSelection.has(fileName)) {
@@ -419,11 +481,15 @@ export const useSftpPaneActions = ({
         return { ...prev, selectedFiles: newSelection };
       });
     },
-    [updateActiveTab],
+    [updateActiveTab, clearSelectionsExcept, leftTabsRef, rightTabsRef],
   );
 
   const rangeSelect = useCallback(
     (side: "left" | "right", fileNames: string[]) => {
+      const activeTabId = (side === "left" ? leftTabsRef : rightTabsRef).current.activeTabId;
+      if (activeTabId) {
+        clearSelectionsExcept({ side, tabId: activeTabId });
+      }
       const newSelection = new Set<string>();
       for (const name of fileNames) {
         if (name && name !== "..") {
@@ -433,11 +499,11 @@ export const useSftpPaneActions = ({
 
       updateActiveTab(side, (prev) => ({ ...prev, selectedFiles: newSelection }));
     },
-    [updateActiveTab],
+    [updateActiveTab, clearSelectionsExcept, leftTabsRef, rightTabsRef],
   );
 
   const clearSelection = useCallback((side: "left" | "right") => {
-    updateActiveTab(side, (prev) => ({ ...prev, selectedFiles: new Set() }));
+    updateActiveTab(side, (prev) => ({ ...prev, selectedFiles: EMPTY_SET }));
   }, [updateActiveTab]);
 
   const selectAll = useCallback(
@@ -467,12 +533,12 @@ export const useSftpPaneActions = ({
     );
   }, []);
 
-  const createDirectory = useCallback(
-    async (side: "left" | "right", name: string) => {
+  const createDirectoryAtPath = useCallback(
+    async (side: "left" | "right", path: string, name: string) => {
       const pane = getActivePane(side);
       if (!pane?.connection) return;
 
-      const fullPath = joinPath(pane.connection.currentPath, name);
+      const fullPath = joinPath(path, name);
 
       try {
         if (pane.connection.isLocal) {
@@ -485,7 +551,9 @@ export const useSftpPaneActions = ({
           }
           await netcattyBridge.get()?.mkdirSftp(sftpId, fullPath, pane.filenameEncoding);
         }
-        await refresh(side);
+        if (pane.connection.currentPath === path) {
+          await refresh(side);
+        }
       } catch (err) {
         if (isSessionError(err)) {
           handleSessionError(side, err as Error);
@@ -497,12 +565,21 @@ export const useSftpPaneActions = ({
     [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
   );
 
-  const createFile = useCallback(
+  const createDirectory = useCallback(
     async (side: "left" | "right", name: string) => {
       const pane = getActivePane(side);
       if (!pane?.connection) return;
+      await createDirectoryAtPath(side, pane.connection.currentPath, name);
+    },
+    [createDirectoryAtPath, getActivePane],
+  );
 
-      const fullPath = joinPath(pane.connection.currentPath, name);
+  const createFileAtPath = useCallback(
+    async (side: "left" | "right", path: string, name: string) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) return;
+
+      const fullPath = joinPath(path, name);
 
       try {
         if (pane.connection.isLocal) {
@@ -529,7 +606,9 @@ export const useSftpPaneActions = ({
             throw new Error("No write method available");
           }
         }
-        await refresh(side);
+        if (pane.connection.currentPath === path) {
+          await refresh(side);
+        }
       } catch (err) {
         if (isSessionError(err)) {
           handleSessionError(side, err as Error);
@@ -541,6 +620,15 @@ export const useSftpPaneActions = ({
     [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
   );
 
+  const createFile = useCallback(
+    async (side: "left" | "right", name: string) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) return;
+      await createFileAtPath(side, pane.connection.currentPath, name);
+    },
+    [createFileAtPath, getActivePane],
+  );
+
   const deleteFiles = useCallback(
     async (side: "left" | "right", fileNames: string[]) => {
       const pane = getActivePane(side);
@@ -686,6 +774,139 @@ export const useSftpPaneActions = ({
     [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
   );
 
+  // Rename using a full source path (for tree view where entryPath is already absolute).
+  // newName is still a basename; the new path is built as joinPath(parent, newName).
+  const renameFileAtPath = useCallback(
+    async (side: "left" | "right", oldPath: string, newName: string) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) return;
+
+      const parentPath = getParentPath(oldPath);
+      const newPath = joinPath(parentPath, newName);
+
+      try {
+        if (pane.connection.isLocal) {
+          await netcattyBridge.get()?.renameLocalFile?.(oldPath, newPath);
+        } else {
+          const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+          if (!sftpId) {
+            handleSessionError(side, new Error("SFTP session not found"));
+            return;
+          }
+          await netcattyBridge.get()?.renameSftp?.(sftpId, oldPath, newPath, pane.filenameEncoding);
+        }
+        if (pane.connection.currentPath === parentPath) {
+          await refresh(side);
+        }
+      } catch (err) {
+        if (isSessionError(err)) {
+          handleSessionError(side, err as Error);
+          return;
+        }
+        throw err;
+      }
+    },
+    [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
+  );
+
+  const moveEntriesToPath = useCallback(
+    async (side: "left" | "right", sourcePaths: string[], targetPath: string) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection || sourcePaths.length === 0) return;
+
+      const uniqueSources = Array.from(new Set(sourcePaths.filter(Boolean)));
+      const filteredSources = uniqueSources
+        .sort((a, b) => a.length - b.length)
+        .filter((path, index, arr) =>
+          !arr.slice(0, index).some((otherPath) => isSamePath(path, otherPath) || isDescendantPath(path, otherPath)),
+        );
+
+      const movableSources = filteredSources.filter((sourcePath) => {
+        if (isSamePath(sourcePath, targetPath)) return false;
+        if (isDescendantPath(targetPath, sourcePath)) return false;
+        const destinationPath = joinPath(targetPath, getFileName(sourcePath));
+        return !isSamePath(destinationPath, sourcePath);
+      });
+
+      if (movableSources.length === 0) return;
+
+      const sourceParentNames = new Map<string, string[]>();
+      for (const sourcePath of movableSources) {
+        const parentPath = getParentPath(sourcePath);
+        const names = sourceParentNames.get(parentPath) ?? [];
+        names.push(getFileName(sourcePath));
+        sourceParentNames.set(parentPath, names);
+      }
+
+      try {
+        if (pane.connection.isLocal) {
+          const renameLocalFile = netcattyBridge.get()?.renameLocalFile;
+          if (!renameLocalFile) {
+            throw new Error("Local rename unavailable");
+          }
+          for (const sourcePath of movableSources) {
+            const destinationPath = joinPath(targetPath, getFileName(sourcePath));
+            await renameLocalFile(sourcePath, destinationPath);
+          }
+        } else {
+          const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+          if (!sftpId) {
+            handleSessionError(side, new Error("SFTP session not found"));
+            return;
+          }
+          const renameSftp = netcattyBridge.get()?.renameSftp;
+          if (!renameSftp) {
+            throw new Error("SFTP rename unavailable");
+          }
+          for (const sourcePath of movableSources) {
+            const destinationPath = joinPath(targetPath, getFileName(sourcePath));
+            await renameSftp(sftpId, sourcePath, destinationPath, pane.filenameEncoding);
+          }
+        }
+        clearCacheForConnection(pane.connection.id);
+        const currentPath = pane.connection.currentPath;
+        const sourceParents = Array.from(sourceParentNames.keys());
+        const currentPathAffected =
+          sourceParents.some((path) => isSamePath(path, currentPath)) ||
+          isSamePath(targetPath, currentPath);
+
+        if (currentPathAffected) {
+          await refresh(side);
+        } else {
+          updateActiveTab(side, (prev) => {
+            if (!prev.connection || prev.connection.id !== pane.connection?.id) {
+              return prev;
+            }
+
+            const namesInCurrentPath = sourceParentNames.get(prev.connection.currentPath);
+            if (!namesInCurrentPath || namesInCurrentPath.length === 0) {
+              return prev;
+            }
+
+            const removeSet = new Set(namesInCurrentPath);
+            const nextSelection = new Set(prev.selectedFiles);
+            for (const name of removeSet) {
+              nextSelection.delete(name);
+            }
+
+            return {
+              ...prev,
+              files: prev.files.filter((file) => !removeSet.has(file.name)),
+              selectedFiles: nextSelection,
+            };
+          });
+        }
+      } catch (err) {
+        if (isSessionError(err)) {
+          handleSessionError(side, err as Error);
+          return;
+        }
+        throw err;
+      }
+    },
+    [clearCacheForConnection, getActivePane, handleSessionError, isDescendantPath, isSamePath, isSessionError, refresh, sftpSessionsRef, updateActiveTab],
+  );
+
   const changePermissions = useCallback(
     async (
       side: "left" | "right",
@@ -730,10 +951,14 @@ export const useSftpPaneActions = ({
     setFilter,
     getFilteredFiles,
     createDirectory,
+    createDirectoryAtPath,
     createFile,
+    createFileAtPath,
     deleteFiles,
     deleteFilesAtPath,
     renameFile,
+    renameFileAtPath,
+    moveEntriesToPath,
     changePermissions,
   };
 };

application/state/sftp/useSftpTabsState.ts

@@ -14,6 +14,7 @@ interface SftpTabsState {
   getActivePane: (side: "left" | "right") => SftpPane | null;
   updateTab: (side: "left" | "right", tabId: string, updater: (pane: SftpPane) => SftpPane) => void;
   updateActiveTab: (side: "left" | "right", updater: (pane: SftpPane) => SftpPane) => void;
+  clearSelectionsExcept: (target: { side: "left" | "right"; tabId: string } | null) => void;
   setTabShowHiddenFiles: (side: "left" | "right", tabId: string, showHiddenFiles: boolean) => void;
   addTab: (side: "left" | "right") => string;
   closeTab: (side: "left" | "right", tabId: string) => void;
@@ -34,6 +35,8 @@ interface SftpTabsState {
   getActiveTabId: (side: "left" | "right") => string | null;
 }
 
+const EMPTY_SELECTION = new Set<string>();
+
 export const useSftpTabsState = ({
   defaultShowHiddenFiles = false,
 }: {
@@ -95,6 +98,31 @@ export const useSftpTabsState = ({
     [updateTab],
   );
 
+  const clearSelectionsExcept = useCallback(
+    (target: { side: "left" | "right"; tabId: string } | null) => {
+      const clearSideSelections = (
+        prev: SftpSideTabs,
+        side: "left" | "right",
+      ): SftpSideTabs => {
+        let changed = false;
+        const tabs = prev.tabs.map((tab) => {
+          const shouldKeepSelection =
+            target?.side === side && target.tabId === tab.id;
+          if (shouldKeepSelection || tab.selectedFiles.size === 0) {
+            return tab;
+          }
+          changed = true;
+          return { ...tab, selectedFiles: EMPTY_SELECTION };
+        });
+        return changed ? { ...prev, tabs } : prev;
+      };
+
+      setLeftTabs((prev) => clearSideSelections(prev, "left"));
+      setRightTabs((prev) => clearSideSelections(prev, "right"));
+    },
+    [],
+  );
+
   const setTabShowHiddenFiles = useCallback(
     (side: "left" | "right", tabId: string, showHiddenFiles: boolean) => {
       updateTab(side, tabId, (prev) => {
@@ -258,6 +286,7 @@ export const useSftpTabsState = ({
     getActivePane,
     updateTab,
     updateActiveTab,
+    clearSelectionsExcept,
     setTabShowHiddenFiles,
     addTab,
     closeTab,

application/state/useAIState.ts

@@ -47,27 +47,63 @@ function cleanupAcpSessions(sessionIds: string[]) {
   }
 }
 
+function isScopeKeyActive(scopeKey: string, activeTargetIds: Set<string>) {
+  const separatorIndex = scopeKey.indexOf(':');
+  if (separatorIndex === -1) return true;
+
+  const targetId = scopeKey.slice(separatorIndex + 1);
+  if (!targetId) return true;
+
+  return activeTargetIds.has(targetId);
+}
+
 export function cleanupOrphanedAISessions(activeTargetIds: Set<string>) {
   const currentSessions = latestAISessionsSnapshot
     ?? localStorageAdapter.read<AISession[]>(STORAGE_KEY_AI_SESSIONS)
     ?? [];
-  const removedSessionIds = currentSessions
+  const orphanedSessionIds = currentSessions
     .filter((session) => session.scope.targetId && !activeTargetIds.has(session.scope.targetId))
     .map((session) => session.id);
 
-  if (removedSessionIds.length === 0) return;
+  if (orphanedSessionIds.length > 0) {
+    const orphanedSessionIdSet = new Set(orphanedSessionIds);
 
-  cleanupAcpSessions(removedSessionIds);
+    // Determine which sessions can be restored via host-based matching
+    const preservedIds = new Set<string>();
+    for (const session of currentSessions) {
+      if (!orphanedSessionIdSet.has(session.id)) continue;
+      // Only preserve remote terminal sessions with real hostIds
+      const isRestorable = session.scope.type === 'terminal'
+        && session.scope.hostIds?.length
+        && session.scope.hostIds.some((id) => !id.startsWith('local-') && !id.startsWith('serial-'));
+      if (isRestorable) {
+        preservedIds.add(session.id);
+      }
+    }
 
-  const removedSessionIdSet = new Set(removedSessionIds);
+    // Cleanup ACP sessions for all orphans (both deleted and preserved).
+    // Preserved sessions will get a new externalSessionId on next use,
+    // so cleaning the old one is safe and prevents subprocess leaks.
+    cleanupAcpSessions(orphanedSessionIds);
 
-  const nextSessions = currentSessions.filter((session) => {
-    if (!session.scope.targetId) return true;
-    return activeTargetIds.has(session.scope.targetId);
-  });
-  setLatestAISessionsSnapshot(nextSessions);
-  localStorageAdapter.write(STORAGE_KEY_AI_SESSIONS, pruneSessionsForStorage(nextSessions));
-  emitAIStateChanged(STORAGE_KEY_AI_SESSIONS);
+    const nextSessions = currentSessions
+      .filter((session) => !orphanedSessionIdSet.has(session.id) || preservedIds.has(session.id))
+      .map((session) => {
+        if (!preservedIds.has(session.id) || !session.externalSessionId) {
+          return session;
+        }
+        // Drop transient ACP session handles so the next turn starts cleanly.
+        return { ...session, externalSessionId: undefined };
+      });
+
+    const sessionsChanged = nextSessions.length !== currentSessions.length
+      || nextSessions.some((session, index) => session !== currentSessions[index]);
+    if (sessionsChanged) {
+      setLatestAISessionsSnapshot(nextSessions);
+      localStorageAdapter.write(STORAGE_KEY_AI_SESSIONS, pruneSessionsForStorage(nextSessions));
+      emitAIStateChanged(STORAGE_KEY_AI_SESSIONS);
+    }
+  }
 
   const activeSessionIdMap = latestAIActiveSessionMapSnapshot
     ?? localStorageAdapter.read<Record<string, string | null>>(STORAGE_KEY_AI_ACTIVE_SESSION_MAP)
@@ -75,11 +111,10 @@ export function cleanupOrphanedAISessions(activeTargetIds: Set<string>) {
   let activeSessionMapChanged = false;
   const nextActiveSessionIdMap = { ...activeSessionIdMap };
 
-  for (const [scopeKey, sessionId] of Object.entries(activeSessionIdMap)) {
-    if (sessionId && removedSessionIdSet.has(sessionId)) {
-      nextActiveSessionIdMap[scopeKey] = null;
-      activeSessionMapChanged = true;
-    }
+  for (const scopeKey of Object.keys(activeSessionIdMap)) {
+    if (isScopeKeyActive(scopeKey, activeTargetIds)) continue;
+    delete nextActiveSessionIdMap[scopeKey];
+    activeSessionMapChanged = true;
   }
 
   if (activeSessionMapChanged) {
@@ -126,6 +161,19 @@ function setLatestAIActiveSessionMapSnapshot(activeSessionIdMap: Record<string,
   latestAIActiveSessionMapSnapshot = activeSessionIdMap;
 }
 
+function buildScopeKey(scope: AISessionScope) {
+  return `${scope.type}:${scope.targetId ?? ''}`;
+}
+
+function areHostIdsEqual(left?: string[], right?: string[]) {
+  const leftIds = left ?? [];
+  const rightIds = right ?? [];
+  if (leftIds.length !== rightIds.length) return false;
+
+  const rightSet = new Set(rightIds);
+  return leftIds.every((hostId) => rightSet.has(hostId));
+}
+
 export function useAIState() {
   // ── Provider Config ──
   const [providers, setProvidersRaw] = useState<ProviderConfig[]>(() =>
@@ -598,6 +646,61 @@ export function useAIState() {
     });
   }, [debouncedPersistSessions]);
 
+  const retargetSessionScope = useCallback((sessionId: string, scope: AISessionScope) => {
+    const currentSession = sessionsRef.current.find((session) => session.id === sessionId);
+    if (!currentSession) return;
+
+    const currentScope = currentSession.scope;
+    const scopeChanged =
+      currentScope.type !== scope.type
+      || currentScope.targetId !== scope.targetId
+      || !areHostIdsEqual(currentScope.hostIds, scope.hostIds);
+
+    const nextScopeKey = buildScopeKey(scope);
+    const currentScopeKey = buildScopeKey(currentScope);
+
+    if (scopeChanged) {
+      setSessionsRaw((prev) => {
+        let changed = false;
+        const next = prev.map((session) => {
+          if (session.id !== sessionId) return session;
+          changed = true;
+          // Clear stale ACP handle — retarget may run before orphan cleanup
+          return { ...session, scope, externalSessionId: undefined };
+        });
+
+        if (!changed) return prev;
+
+        sessionsRef.current = next;
+        setLatestAISessionsSnapshot(next);
+        persistSessions(next);
+        return next;
+      });
+    }
+
+    setActiveSessionIdMapRaw((prev) => {
+      let changed = false;
+      const next = { ...prev };
+
+      if (currentScopeKey !== nextScopeKey && next[currentScopeKey] === sessionId) {
+        delete next[currentScopeKey];
+        changed = true;
+      }
+
+      if (next[nextScopeKey] !== sessionId) {
+        next[nextScopeKey] = sessionId;
+        changed = true;
+      }
+
+      if (!changed) return prev;
+
+      setLatestAIActiveSessionMapSnapshot(next);
+      localStorageAdapter.write(STORAGE_KEY_AI_ACTIVE_SESSION_MAP, next);
+      emitAIStateChanged(STORAGE_KEY_AI_ACTIVE_SESSION_MAP);
+      return next;
+    });
+  }, [persistSessions]);
+
   // Maximum messages per session to prevent unbounded memory growth
   const MAX_MESSAGES_PER_SESSION = 500;
 
@@ -750,6 +853,7 @@ export function useAIState() {
     deleteSessionsByTarget,
     updateSessionTitle,
     updateSessionExternalSessionId,
+    retargetSessionScope,
     addMessageToSession,
     updateLastMessage,
     updateMessageById,

application/state/useAutoSync.ts

@@ -7,7 +7,7 @@
  * - Debounced sync to avoid too frequent API calls
  */
 
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCloudSync } from './useCloudSync';
 import { useI18n } from '../i18n/I18nProvider';
 import { getCloudSyncManager } from '../../infrastructure/services/CloudSyncManager';
@@ -32,6 +32,7 @@ interface AutoSyncConfig {
   snippetPackages?: SyncPayload['snippetPackages'];
   portForwardingRules?: SyncPayload['portForwardingRules'];
   knownHosts?: SyncPayload['knownHosts'];
+  groupConfigs?: SyncPayload['groupConfigs'];
   /** Opaque token that changes whenever a synced setting changes. */
   settingsVersion?: number;
 
@@ -60,6 +61,14 @@ export const useAutoSync = (config: AutoSyncConfig) => {
   const isSyncRunningRef = useRef(false);
   const skipNextSyncRef = useRef(false);
 
+  // Listen for SFTP bookmark changes to trigger auto-sync
+  const [bookmarksVersion, setBookmarksVersion] = useState(0);
+  useEffect(() => {
+    const handler = () => setBookmarksVersion((v) => v + 1);
+    window.addEventListener('sftp-bookmarks-changed', handler);
+    return () => window.removeEventListener('sftp-bookmarks-changed', handler);
+  }, []);
+
   const getSyncSnapshot = useCallback(() => {
     let effectivePFRules = config.portForwardingRules;
     if (!effectivePFRules || effectivePFRules.length === 0) {
@@ -87,6 +96,7 @@ export const useAutoSync = (config: AutoSyncConfig) => {
       snippetPackages: config.snippetPackages,
       portForwardingRules: effectivePFRules,
       knownHosts: effectiveKnownHosts,
+      groupConfigs: config.groupConfigs,
     };
   }, [
     config.hosts,
@@ -97,6 +107,7 @@ export const useAutoSync = (config: AutoSyncConfig) => {
     config.snippetPackages,
     config.portForwardingRules,
     config.knownHosts,
+    config.groupConfigs,
   ]);
 
   // Build sync payload
@@ -288,7 +299,7 @@ export const useAutoSync = (config: AutoSyncConfig) => {
         clearTimeout(syncTimeoutRef.current);
       }
     };
-  }, [sync.hasAnyConnectedProvider, sync.autoSyncEnabled, sync.isUnlocked, sync.isSyncing, getDataHash, syncNow, config.settingsVersion]);
+  }, [sync.hasAnyConnectedProvider, sync.autoSyncEnabled, sync.isUnlocked, sync.isSyncing, getDataHash, syncNow, config.settingsVersion, bookmarksVersion]);
   
   // Check remote version on startup/unlock
   useEffect(() => {

application/state/useCloudSync.ts

@@ -6,7 +6,7 @@
  * Uses useSyncExternalStore for real-time state synchronization across all components.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
 import {
   type CloudProvider,
   type SecurityState,
@@ -81,8 +81,10 @@ export interface CloudSyncHook {
     code: string,
     redirectUri: string
   ) => Promise<void>;
+  cancelOAuthConnect: () => void;
   disconnectProvider: (provider: CloudProvider) => Promise<void>;
-  
+  resetProviderStatus: (provider: CloudProvider) => void;
+
   // Sync Actions
   syncNow: (payload: SyncPayload) => Promise<Map<CloudProvider, SyncResult>>;
   syncToProvider: (provider: CloudProvider, payload: SyncPayload) => Promise<SyncResult>;
@@ -120,17 +122,6 @@ const getSnapshot = (): SyncManagerState => {
 };
 
 export const useCloudSync = (): CloudSyncHook => {
-  // Force update mechanism to ensure React re-renders
-  const [, forceUpdate] = useState(0);
-  
-  // Subscribe to state changes and force update
-  useEffect(() => {
-    const unsubscribe = manager.subscribeToStateChanges(() => {
-      forceUpdate(n => n + 1);
-    });
-    return unsubscribe;
-  }, []);
-  
   // Use useSyncExternalStore for real-time state sync across all components
   const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 
@@ -266,7 +257,7 @@ export const useCloudSync = (): CloudSyncHook => {
       throw new Error('Unexpected auth type');
     }
     const data = result.data as { url: string; redirectUri: string };
-    
+
     // Start OAuth callback server in Electron and wait for authorization
     const bridge = netcattyBridge.get();
     const startCallback = bridge?.startOAuthCallback;
@@ -274,32 +265,44 @@ export const useCloudSync = (): CloudSyncHook => {
       // Get state from adapter for CSRF protection
       const adapter = manager.getAdapter('google') as { getPKCEState?: () => string | null } | undefined;
       const expectedState = adapter?.getPKCEState?.() || undefined;
-      
-      // Start callback server and open browser
+
+      // Start callback server and open system browser
       const callbackPromise = startCallback(expectedState);
-      
-      // Open browser after starting server
-      setTimeout(() => {
-        window.open(data.url, "_blank", "width=600,height=700,noopener,noreferrer");
-      }, 100);
-      
-      // Wait for callback
-      const { code } = await callbackPromise;
-      
-      // Complete auth with the received code
-      await manager.completePKCEAuth('google', code, data.redirectUri);
+
+      // Use system browser to avoid white-screen issues in popup windows (#563)
+      // Race: if browser launch fails, surface the error immediately
+      let openTimer: ReturnType<typeof setTimeout> | null = null;
+      const browserPromise = new Promise<never>((_resolve, reject) => {
+        openTimer = setTimeout(async () => {
+          try {
+            await bridge?.openExternal(data.url);
+          } catch (err) {
+            bridge?.cancelOAuthCallback?.();
+            reject(err instanceof Error ? err : new Error('Failed to open browser for authentication'));
+          }
+        }, 100);
+      });
+
+      try {
+        const { code } = await Promise.race([callbackPromise, browserPromise]);
+
+        // Complete auth with the received code
+        await manager.completePKCEAuth('google', code, data.redirectUri);
+      } finally {
+        if (openTimer) clearTimeout(openTimer);
+      }
     }
-    
+
     return data.url;
   }, []);
-  
+
   const connectOneDrive = useCallback(async (): Promise<string> => {
     const result = await manager.startProviderAuth('onedrive');
     if (result.type !== 'url') {
       throw new Error('Unexpected auth type');
     }
     const data = result.data as { url: string; redirectUri: string };
-    
+
     // Start OAuth callback server in Electron and wait for authorization
     const bridge = netcattyBridge.get();
     const startCallback = bridge?.startOAuthCallback;
@@ -307,22 +310,33 @@ export const useCloudSync = (): CloudSyncHook => {
       // Get state from adapter for CSRF protection
       const adapter = manager.getAdapter('onedrive') as { getPKCEState?: () => string | null } | undefined;
       const expectedState = adapter?.getPKCEState?.() || undefined;
-      
-      // Start callback server and open browser
+
+      // Start callback server and open system browser
       const callbackPromise = startCallback(expectedState);
-      
-      // Open browser after starting server
-      setTimeout(() => {
-        window.open(data.url, "_blank", "width=600,height=700,noopener,noreferrer");
-      }, 100);
-      
-      // Wait for callback
-      const { code } = await callbackPromise;
-      
-      // Complete auth with the received code
-      await manager.completePKCEAuth('onedrive', code, data.redirectUri);
+
+      // Use system browser to avoid white-screen issues in popup windows (#563)
+      let openTimer: ReturnType<typeof setTimeout> | null = null;
+      const browserPromise = new Promise<never>((_resolve, reject) => {
+        openTimer = setTimeout(async () => {
+          try {
+            await bridge?.openExternal(data.url);
+          } catch (err) {
+            bridge?.cancelOAuthCallback?.();
+            reject(err instanceof Error ? err : new Error('Failed to open browser for authentication'));
+          }
+        }, 100);
+      });
+
+      try {
+        const { code } = await Promise.race([callbackPromise, browserPromise]);
+
+        // Complete auth with the received code
+        await manager.completePKCEAuth('onedrive', code, data.redirectUri);
+      } finally {
+        if (openTimer) clearTimeout(openTimer);
+      }
     }
-    
+
     return data.url;
   }, []);
   
@@ -338,6 +352,10 @@ export const useCloudSync = (): CloudSyncHook => {
     await manager.disconnectProvider(provider);
   }, []);
 
+  const resetProviderStatus = useCallback((provider: CloudProvider): void => {
+    manager.resetProviderStatus(provider);
+  }, []);
+
   const connectWebDAV = useCallback(async (config: WebDAVConfig): Promise<void> => {
     await manager.connectConfigProvider('webdav', config);
   }, []);
@@ -346,6 +364,11 @@ export const useCloudSync = (): CloudSyncHook => {
     await manager.connectConfigProvider('s3', config);
   }, []);
   
+  const cancelOAuthConnect = useCallback(() => {
+    const bridge = netcattyBridge.get();
+    bridge?.cancelOAuthCallback?.();
+  }, []);
+
   // ========== Settings ==========
   
   const setAutoSync = useCallback((enabled: boolean, intervalMinutes?: number) => {
@@ -443,8 +466,10 @@ export const useCloudSync = (): CloudSyncHook => {
     connectWebDAV,
     connectS3,
     completePKCEAuth,
+    cancelOAuthConnect,
     disconnectProvider,
-    
+    resetProviderStatus,
+
     // Sync Actions
     syncNow: syncNowWithUnlock,
     syncToProvider: syncToProviderWithUnlock,

application/state/useImmersiveMode.ts

@@ -151,12 +151,10 @@ function removeImmersiveStyle() {
 // ---------------------------------------------------------------------------
 
 export function useImmersiveMode({
-  isImmersive,
   activeTabId,
   activeTerminalTheme,
   restoreOriginalTheme,
 }: {
-  isImmersive: boolean;
   activeTabId: string;
   activeTerminalTheme: TerminalTheme | null;
   restoreOriginalTheme: () => void;
@@ -170,18 +168,18 @@ export function useImmersiveMode({
 
   // APPLY: useLayoutEffect — runs before paint, O(1) Map lookup, single DOM write
   useLayoutEffect(() => {
-    if (isImmersive && isTerminalTab && activeTerminalTheme) {
+    if (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]);
+  }, [isTerminalTab, activeTerminalTheme]);
 
   // RESTORE: useEffect — runs after paint, with fade overlay
   useEffect(() => {
-    if (isImmersive && isTerminalTab && activeTerminalTheme) return;
+    if (isTerminalTab && activeTerminalTheme) return;
     if (!overrideActiveRef.current) return;
     overrideActiveRef.current = false;
     appliedFpRef.current = null;
@@ -198,7 +196,7 @@ export function useImmersiveMode({
     });
     const fallback = setTimeout(() => { if (overlay.parentNode) overlay.remove(); }, 400);
     return () => { clearTimeout(fallback); if (overlay.parentNode) overlay.remove(); };
-  }, [isImmersive, isTerminalTab, activeTerminalTheme, restoreOriginalTheme]);
+  }, [isTerminalTab, activeTerminalTheme, restoreOriginalTheme]);
 
   // Cleanup on unmount
   useEffect(() => {

application/state/usePortForwardingAutoStart.ts

@@ -4,7 +4,8 @@
  * when the application starts, not when the user navigates to the port forwarding page.
  */
 import { useCallback, useEffect, useRef } from "react";
-import { Host, Identity, PortForwardingRule, SSHKey } from "../../domain/models";
+import { GroupConfig, Host, Identity, PortForwardingRule, SSHKey } from "../../domain/models";
+import { resolveGroupDefaults, applyGroupDefaults } from "../../domain/groupConfig";
 import { STORAGE_KEY_PORT_FORWARDING } from "../../infrastructure/config/storageKeys";
 import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
 import {
@@ -19,6 +20,7 @@ export interface UsePortForwardingAutoStartOptions {
   hosts: Host[];
   keys: SSHKey[];
   identities: Identity[];
+  groupConfigs: GroupConfig[];
 }
 
 /**
@@ -29,11 +31,13 @@ export const usePortForwardingAutoStart = ({
   hosts,
   keys,
   identities,
+  groupConfigs,
 }: UsePortForwardingAutoStartOptions): void => {
   const autoStartExecutedRef = useRef(false);
   const hostsRef = useRef<Host[]>(hosts);
   const keysRef = useRef<SSHKey[]>(keys);
   const identitiesRef = useRef<Identity[]>(identities);
+  const groupConfigsRef = useRef<GroupConfig[]>(groupConfigs);
 
   const isHostAuthReady = useCallback((host: Host, seen = new Set<string>()): boolean => {
     if (!host || seen.has(host.id)) return true;
@@ -73,6 +77,16 @@ export const usePortForwardingAutoStart = ({
     identitiesRef.current = identities;
   }, [identities]);
 
+  useEffect(() => {
+    groupConfigsRef.current = groupConfigs;
+  }, [groupConfigs]);
+
+  const resolveEffectiveHost = useCallback((host: Host): Host => {
+    if (!host.group) return host;
+    const defaults = resolveGroupDefaults(host.group, groupConfigsRef.current);
+    return applyGroupDefaults(host, defaults);
+  }, []);
+
   // Set up the reconnect callback
   useEffect(() => {
     const handleReconnect = async (
@@ -89,11 +103,12 @@ export const usePortForwardingAutoStart = ({
         return { success: false, error: "Rule or host not found" };
       }
 
-      const host = hostsRef.current.find((h) => h.id === rule.hostId);
-      if (!host) {
+      const rawHost = hostsRef.current.find((h) => h.id === rule.hostId);
+      if (!rawHost) {
         return { success: false, error: "Host not found" };
       }
 
+      const host = resolveEffectiveHost(rawHost);
       return startPortForward(rule, host, hostsRef.current, keysRef.current, identitiesRef.current, onStatusChange, true);
     };
 
@@ -101,7 +116,7 @@ export const usePortForwardingAutoStart = ({
     return () => {
       setReconnectCallback(null);
     };
-  }, []);
+  }, [resolveEffectiveHost]);
 
   // Auto-start rules on app launch
   useEffect(() => {
@@ -146,8 +161,9 @@ export const usePortForwardingAutoStart = ({
 
       // Start each auto-start rule
       for (const rule of autoStartRules) {
-        const host = hosts.find((h) => h.id === rule.hostId);
-        if (host) {
+        const rawHost = hosts.find((h) => h.id === rule.hostId);
+        if (rawHost) {
+          const host = resolveEffectiveHost(rawHost);
           void startPortForward(
             rule,
             host,
@@ -180,5 +196,5 @@ export const usePortForwardingAutoStart = ({
     };
 
     void runAutoStart();
-  }, [hosts, identities, isHostAuthReady, keys]);
+  }, [hosts, identities, isHostAuthReady, keys, resolveEffectiveHost]);
 };

application/state/useSessionState.ts

@@ -58,7 +58,7 @@ export const useSessionState = () => {
     return sessionId;
   }, [setActiveTabId]);
 
-  const createSerialSession = useCallback((config: SerialConfig) => {
+  const createSerialSession = useCallback((config: SerialConfig, options?: { charset?: string }) => {
     const sessionId = crypto.randomUUID();
     const serialHostId = `serial-${sessionId}`;
     const portName = config.path.split('/').pop() || config.path;
@@ -71,6 +71,7 @@ export const useSessionState = () => {
       status: 'connecting',
       protocol: 'serial',
       serialConfig: config,
+      charset: options?.charset,
     };
     setSessions(prev => [...prev, newSession]);
     setActiveTabId(sessionId);
@@ -103,6 +104,7 @@ export const useSessionState = () => {
         status: 'connecting',
         protocol: 'serial',
         serialConfig: serialConfig,
+        charset: host.charset,
       };
       setSessions(prev => [...prev, newSession]);
       setActiveTabId(sessionId);
@@ -120,6 +122,7 @@ export const useSessionState = () => {
       protocol: host.protocol,
       port: host.port,
       moshEnabled: host.moshEnabled,
+      charset: host.charset,
     };
     setSessions(prev => [...prev, newSession]);
     setActiveTabId(newSession.id);
@@ -321,6 +324,7 @@ export const useSessionState = () => {
           status: 'connecting',
           protocol: 'serial',
           serialConfig: serialConfig,
+          charset: host.charset,
         };
       }
 
@@ -334,6 +338,7 @@ export const useSessionState = () => {
         protocol: host.protocol,
         port: host.port,
         moshEnabled: host.moshEnabled,
+        charset: host.charset,
       };
     });
 
@@ -445,8 +450,9 @@ export const useSessionState = () => {
           port: session.port,
           moshEnabled: session.moshEnabled,
           shellType: nextShellType,
+          charset: session.charset,
         };
-        
+
         // Add pane to existing workspace
         const hint: SplitHint = {
           direction,
@@ -476,13 +482,14 @@ export const useSessionState = () => {
         port: session.port,
         moshEnabled: session.moshEnabled,
         shellType: nextShellType,
+        charset: session.charset,
       };
-      
+
       const hint: SplitHint = {
         direction,
         position: direction === 'horizontal' ? 'bottom' : 'right',
       };
-      
+
       const newWorkspace = createWorkspaceEntity(sessionId, newSession.id, hint);
       setWorkspaces(prev => [...prev, newWorkspace]);
       setActiveTabId(newWorkspace.id);
@@ -563,6 +570,7 @@ export const useSessionState = () => {
       hostname: host.hostname,
       username: host.username,
       status: 'connecting' as const,
+      charset: host.charset,
       // workspaceId will be set after workspace is created
     }));
 
@@ -649,6 +657,7 @@ export const useSessionState = () => {
         port: session.port,
         moshEnabled: session.moshEnabled,
         shellType: nextShellType,
+        charset: session.charset,
         serialConfig: session.serialConfig,
       };
 
@@ -682,9 +691,11 @@ export const useSessionState = () => {
       ...workspaces.map(w => w.id),
       ...logViews.map(lv => lv.id),
     ];
+    const allTabIdSet = new Set(allTabIds);
     // Filter tabOrder to only include existing tabs, then add any new tabs at the end
-    const orderedIds = tabOrder.filter(id => allTabIds.includes(id));
-    const newIds = allTabIds.filter(id => !orderedIds.includes(id));
+    const orderedIds = tabOrder.filter(id => allTabIdSet.has(id));
+    const orderedIdSet = new Set(orderedIds);
+    const newIds = allTabIds.filter(id => !orderedIdSet.has(id));
     return [...orderedIds, ...newIds];
   }, [orphanSessions, workspaces, logViews, tabOrder]);
 
@@ -698,10 +709,12 @@ export const useSessionState = () => {
         ...workspaces.map(w => w.id),
         ...logViews.map(lv => lv.id),
       ];
+      const allTabIdSet = new Set(allTabIds);
       
       // Build current effective order: existing order + new tabs at end
-      const orderedIds = prevTabOrder.filter(id => allTabIds.includes(id));
-      const newIds = allTabIds.filter(id => !orderedIds.includes(id));
+      const orderedIds = prevTabOrder.filter(id => allTabIdSet.has(id));
+      const orderedIdSet = new Set(orderedIds);
+      const newIds = allTabIds.filter(id => !orderedIdSet.has(id));
       const currentOrder = [...orderedIds, ...newIds];
       
       const draggedIndex = currentOrder.indexOf(draggedId);

application/state/useSettingsState.ts

@@ -22,6 +22,8 @@ import {
   STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES,
   STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD,
   STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR,
+  STORAGE_KEY_SFTP_TRANSFER_CONCURRENCY,
+  STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE,
   STORAGE_KEY_EDITOR_WORD_WRAP,
   STORAGE_KEY_SESSION_LOGS_ENABLED,
   STORAGE_KEY_SESSION_LOGS_DIR,
@@ -30,7 +32,8 @@ import {
   STORAGE_KEY_CLOSE_TO_TRAY,
   STORAGE_KEY_GLOBAL_HOTKEY_ENABLED,
   STORAGE_KEY_AUTO_UPDATE_ENABLED,
-  STORAGE_KEY_IMMERSIVE_MODE,
+  STORAGE_KEY_WORKSPACE_FOCUS_STYLE,
+
 } from '../../infrastructure/config/storageKeys';
 import { DEFAULT_UI_LOCALE, resolveSupportedLocale } from '../../infrastructure/config/i18n';
 import { TERMINAL_THEMES } from '../../infrastructure/config/terminalThemes';
@@ -65,6 +68,7 @@ const DEFAULT_SFTP_AUTO_SYNC = false;
 const DEFAULT_SFTP_SHOW_HIDDEN_FILES = false;
 const DEFAULT_SFTP_USE_COMPRESSED_UPLOAD = true;
 const DEFAULT_SFTP_AUTO_OPEN_SIDEBAR = false;
+const DEFAULT_SFTP_DEFAULT_VIEW_MODE: 'list' | 'tree' = 'list';
 
 // Editor defaults
 const DEFAULT_EDITOR_WORD_WRAP = false;
@@ -121,7 +125,7 @@ const applyThemeTokens = (
   accentOverride: string,
 ) => {
   const root = window.document.documentElement;
-  // If immersive mode is active (style tag present), it owns the dark/light class — don't override
+  // If immersive override 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);
@@ -239,6 +243,14 @@ export const useSettingsState = () => {
     const stored = readStoredString(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR);
     return stored === 'true' ? true : DEFAULT_SFTP_AUTO_OPEN_SIDEBAR;
   });
+  const [sftpDefaultViewMode, setSftpDefaultViewMode] = useState<'list' | 'tree'>(() => {
+    const stored = readStoredString(STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE);
+    return (stored === 'list' || stored === 'tree') ? stored : DEFAULT_SFTP_DEFAULT_VIEW_MODE;
+  });
+  const [sftpTransferConcurrency, setSftpTransferConcurrencyState] = useState<number>(() => {
+    const stored = localStorageAdapter.readNumber(STORAGE_KEY_SFTP_TRANSFER_CONCURRENCY);
+    return stored != null && stored >= 1 && stored <= 16 ? stored : 4;
+  });
 
   // Editor Settings
   const [editorWordWrap, setEditorWordWrapState] = useState<boolean>(() => {
@@ -328,19 +340,22 @@ 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 setSftpTransferConcurrency = useCallback((value: number) => {
+    const clamped = Math.max(1, Math.min(16, Math.round(value)));
+    setSftpTransferConcurrencyState(clamped);
+    localStorageAdapter.writeString(STORAGE_KEY_SFTP_TRANSFER_CONCURRENCY, String(clamped));
+    notifySettingsChanged(STORAGE_KEY_SFTP_TRANSFER_CONCURRENCY, clamped);
+  }, [notifySettingsChanged]);
+
+  const [workspaceFocusStyle, setWorkspaceFocusStyleState] = useState<'dim' | 'border'>(() => {
+    const stored = localStorageAdapter.readString(STORAGE_KEY_WORKSPACE_FOCUS_STYLE);
+    return stored === 'border' ? 'border' : 'dim';
   });
-  const setImmersiveMode = useCallback((enabled: boolean) => {
-    setImmersiveModeState(enabled);
-    localStorageAdapter.writeString(STORAGE_KEY_IMMERSIVE_MODE, String(enabled));
-    notifySettingsChanged(STORAGE_KEY_IMMERSIVE_MODE, enabled);
+  const setWorkspaceFocusStyle = useCallback((style: 'dim' | 'border') => {
+    setWorkspaceFocusStyleState(style);
+    localStorageAdapter.writeString(STORAGE_KEY_WORKSPACE_FOCUS_STYLE, style);
+    notifySettingsChanged(STORAGE_KEY_WORKSPACE_FOCUS_STYLE, style);
   }, [notifySettingsChanged]);
 
   const syncAppearanceFromStorage = useCallback(() => {
@@ -433,18 +448,16 @@ export const useSettingsState = () => {
     if (storedCompress === 'true' || storedCompress === 'false') setSftpUseCompressedUpload(storedCompress === 'true');
     const storedAutoOpenSidebar = readStoredString(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR);
     if (storedAutoOpenSidebar === 'true' || storedAutoOpenSidebar === 'false') setSftpAutoOpenSidebar(storedAutoOpenSidebar === 'true');
+    const storedDefaultViewMode = readStoredString(STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE);
+    if (storedDefaultViewMode === 'list' || storedDefaultViewMode === 'tree') setSftpDefaultViewMode(storedDefaultViewMode);
 
-    // 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);
-    }
+    // Workspace focus style
+    const storedFocusStyle = readStoredString(STORAGE_KEY_WORKSPACE_FOCUS_STYLE);
+    if (storedFocusStyle === 'dim' || storedFocusStyle === 'border') setWorkspaceFocusStyleState(storedFocusStyle);
 
     // Custom terminal themes
     customThemeStore.loadFromStorage();
-  }, [syncAppearanceFromStorage, syncCustomCssFromStorage, setTerminalSettings, notifySettingsChanged]);
+  }, [syncAppearanceFromStorage, syncCustomCssFromStorage, setTerminalSettings]);
 
   useLayoutEffect(() => {
     const tokens = getUiThemeById(resolvedTheme, resolvedTheme === 'dark' ? darkUiThemeId : lightUiThemeId).tokens;
@@ -585,8 +598,16 @@ 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));
+      if (key === STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE && typeof value === 'string') {
+        if (value === 'list' || value === 'tree') {
+          setSftpDefaultViewMode((prev) => (prev === value ? prev : value));
+        }
+      }
+      if (key === STORAGE_KEY_WORKSPACE_FOCUS_STYLE && (value === 'dim' || value === 'border')) {
+        setWorkspaceFocusStyleState((prev) => (prev === value ? prev : value));
+      }
+      if (key === STORAGE_KEY_SFTP_TRANSFER_CONCURRENCY && typeof value === 'number') {
+        setSftpTransferConcurrencyState((prev) => (prev === value ? prev : value));
       }
     });
     return () => {
@@ -623,18 +644,18 @@ export const useSettingsState = () => {
     customCSS, uiFontFamilyId, hotkeyScheme, uiLanguage,
     terminalThemeId, terminalFontFamilyId, terminalFontSize,
     sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles,
-    sftpUseCompressedUpload, sftpAutoOpenSidebar,
+    sftpUseCompressedUpload, sftpAutoOpenSidebar, sftpDefaultViewMode,
     editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat,
-    globalHotkeyEnabled, autoUpdateEnabled, immersiveMode,
+    globalHotkeyEnabled, autoUpdateEnabled,
   });
   settingsSnapshotRef.current = {
     theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent,
     customCSS, uiFontFamilyId, hotkeyScheme, uiLanguage,
     terminalThemeId, terminalFontFamilyId, terminalFontSize,
     sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles,
-    sftpUseCompressedUpload, sftpAutoOpenSidebar,
+    sftpUseCompressedUpload, sftpAutoOpenSidebar, sftpDefaultViewMode,
     editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat,
-    globalHotkeyEnabled, autoUpdateEnabled, immersiveMode,
+    globalHotkeyEnabled, autoUpdateEnabled,
   };
 
   // Listen for storage changes from other windows (cross-window sync)
@@ -783,6 +804,12 @@ export const useSettingsState = () => {
           setSftpAutoOpenSidebar(newValue);
         }
       }
+      // Sync SFTP default view mode from other windows
+      if (e.key === STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE && e.newValue) {
+        if ((e.newValue === 'list' || e.newValue === 'tree') && e.newValue !== s.sftpDefaultViewMode) {
+          setSftpDefaultViewMode(e.newValue);
+        }
+      }
       // Sync global hotkey enabled setting from other windows
       if (e.key === STORAGE_KEY_GLOBAL_HOTKEY_ENABLED && e.newValue !== null) {
         const newValue = e.newValue === 'true';
@@ -797,11 +824,17 @@ 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);
+      // Sync workspace focus style from other windows
+      if (e.key === STORAGE_KEY_WORKSPACE_FOCUS_STYLE && e.newValue !== null) {
+        if (e.newValue === 'dim' || e.newValue === 'border') {
+          setWorkspaceFocusStyleState(e.newValue);
+        }
+      }
+      // Sync transfer concurrency from other windows
+      if (e.key === STORAGE_KEY_SFTP_TRANSFER_CONCURRENCY && e.newValue !== null) {
+        const num = Number(e.newValue);
+        if (num >= 1 && num <= 16) {
+          setSftpTransferConcurrencyState(num);
         }
       }
     };
@@ -911,6 +944,13 @@ export const useSettingsState = () => {
     notifySettingsChanged(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR, sftpAutoOpenSidebar);
   }, [sftpAutoOpenSidebar, notifySettingsChanged]);
 
+  // Persist SFTP default view mode
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE, sftpDefaultViewMode);
+    if (!persistMountedRef.current) return;
+    notifySettingsChanged(STORAGE_KEY_SFTP_DEFAULT_VIEW_MODE, sftpDefaultViewMode);
+  }, [sftpDefaultViewMode, notifySettingsChanged]);
+
   // Persist Session Logs settings
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_SESSION_LOGS_ENABLED, sessionLogsEnabled ? 'true' : 'false');
@@ -1145,6 +1185,10 @@ export const useSettingsState = () => {
     setSftpUseCompressedUpload,
     sftpAutoOpenSidebar,
     setSftpAutoOpenSidebar,
+    sftpDefaultViewMode,
+    setSftpDefaultViewMode,
+    sftpTransferConcurrency,
+    setSftpTransferConcurrency,
     // Editor Settings
     editorWordWrap,
     setEditorWordWrap: useCallback((enabled: boolean) => {
@@ -1171,8 +1215,8 @@ export const useSettingsState = () => {
     setGlobalHotkeyEnabled,
     rehydrateAllFromStorage,
     reapplyCurrentTheme,
-    immersiveMode,
-    setImmersiveMode,
+    workspaceFocusStyle,
+    setWorkspaceFocusStyle,
     // Opaque version that changes when any synced setting changes, used by useAutoSync.
     // eslint-disable-next-line react-hooks/exhaustive-deps
     settingsVersion: useMemo(() => Math.random(), [
@@ -1180,8 +1224,8 @@ export const useSettingsState = () => {
       uiFontFamilyId, uiLanguage, customCSS,
       terminalThemeId, terminalFontFamilyId, terminalFontSize, terminalSettings,
       customKeyBindings, editorWordWrap,
-      sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles, sftpUseCompressedUpload, sftpAutoOpenSidebar,
-      customThemes, immersiveMode,
+      sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles, sftpUseCompressedUpload, sftpAutoOpenSidebar, sftpDefaultViewMode,
+      customThemes, workspaceFocusStyle,
     ]),
   };
 };

application/state/useSftpFileAssociations.ts

@@ -3,10 +3,10 @@
  * Uses a shared state pattern to sync across components
  */
 import { useCallback, useEffect, useSyncExternalStore } from 'react';
-import { STORAGE_KEY_SFTP_FILE_ASSOCIATIONS } from '../../infrastructure/config/storageKeys';
+import { STORAGE_KEY_SFTP_FILE_ASSOCIATIONS, STORAGE_KEY_SFTP_DEFAULT_OPENER } from '../../infrastructure/config/storageKeys';
 import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
 import type { FileAssociation, FileOpenerType, SystemAppInfo } from '../../lib/sftpFileUtils';
-import { getFileExtension } from '../../lib/sftpFileUtils';
+import { getFileExtension, isKnownBinaryFile } from '../../lib/sftpFileUtils';
 
 export interface FileAssociationEntry {
   openerType: FileOpenerType;
@@ -17,10 +17,12 @@ export interface FileAssociationsMap {
   [extension: string]: FileAssociationEntry;
 }
 
-// Shared state and subscribers for cross-component synchronization
+// ---------------------------------------------------------------------------
+// Per-extension associations store
+// ---------------------------------------------------------------------------
+
 const subscribers = new Set<() => void>();
 
-// Use a wrapper object so we can update the reference for useSyncExternalStore
 let snapshotRef: { associations: FileAssociationsMap } = { associations: {} };
 
 function loadFromStorage(): FileAssociationsMap {
@@ -39,7 +41,6 @@ function loadFromStorage(): FileAssociationsMap {
   return {};
 }
 
-// Initialize from storage
 snapshotRef = { associations: loadFromStorage() };
 
 function saveToStorage(associations: FileAssociationsMap) {
@@ -47,7 +48,6 @@ function saveToStorage(associations: FileAssociationsMap) {
 }
 
 function updateAssociations(newAssociations: FileAssociationsMap) {
-  // Create new reference so useSyncExternalStore detects change
   snapshotRef = { associations: newAssociations };
   saveToStorage(newAssociations);
   subscribers.forEach(callback => callback());
@@ -62,15 +62,54 @@ function getSnapshot() {
   return snapshotRef;
 }
 
+// ---------------------------------------------------------------------------
+// Default opener store (separate from per-extension associations)
+// ---------------------------------------------------------------------------
+
+const defaultOpenerSubscribers = new Set<() => void>();
+
+let defaultOpenerSnapshot: { entry: FileAssociationEntry | null } = {
+  entry: localStorageAdapter.read<FileAssociationEntry>(STORAGE_KEY_SFTP_DEFAULT_OPENER) ?? null,
+};
+
+function subscribeDefaultOpener(callback: () => void) {
+  defaultOpenerSubscribers.add(callback);
+  return () => defaultOpenerSubscribers.delete(callback);
+}
+
+function getDefaultOpenerSnapshot() {
+  return defaultOpenerSnapshot;
+}
+
+function updateDefaultOpener(entry: FileAssociationEntry | null) {
+  defaultOpenerSnapshot = { entry };
+  if (entry) {
+    localStorageAdapter.write(STORAGE_KEY_SFTP_DEFAULT_OPENER, entry);
+  } else {
+    localStorageAdapter.remove(STORAGE_KEY_SFTP_DEFAULT_OPENER);
+  }
+  defaultOpenerSubscribers.forEach(callback => callback());
+}
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
 export function useSftpFileAssociations() {
   const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   const associations = snapshot.associations;
 
+  const defaultOpenerState = useSyncExternalStore(subscribeDefaultOpener, getDefaultOpenerSnapshot, getDefaultOpenerSnapshot);
+
   // Listen for storage events from other tabs/windows
   useEffect(() => {
     const handleStorage = (e: StorageEvent) => {
       if (e.key === STORAGE_KEY_SFTP_FILE_ASSOCIATIONS) {
         updateAssociations(loadFromStorage());
+      } else if (e.key === STORAGE_KEY_SFTP_DEFAULT_OPENER) {
+        updateDefaultOpener(
+          localStorageAdapter.read<FileAssociationEntry>(STORAGE_KEY_SFTP_DEFAULT_OPENER) ?? null,
+        );
       }
     };
     window.addEventListener('storage', handleStorage);
@@ -78,18 +117,46 @@ export function useSftpFileAssociations() {
   }, []);
 
   /**
-   * Get the opener entry for a file based on its extension
+   * Get the opener entry for a file based on its extension.
+   * Falls back to the default opener when no per-extension association exists.
    */
   const getOpenerForFile = useCallback((fileName: string): FileAssociationEntry | null => {
     const ext = getFileExtension(fileName);
-    return associations[ext] || null;
-  }, [associations]);
+    if (associations[ext]) return associations[ext];
+    // Fall back to default opener, but skip built-in editor for binary files
+    const fallback = defaultOpenerState.entry;
+    if (fallback && fallback.openerType === 'builtin-editor' && isKnownBinaryFile(fileName)) {
+      return null;
+    }
+    return fallback;
+  }, [associations, defaultOpenerState]);
+
+  /**
+   * Get the default (fallback) opener, if set.
+   */
+  const getDefaultOpener = useCallback((): FileAssociationEntry | null => {
+    return defaultOpenerState.entry;
+  }, [defaultOpenerState]);
+
+  /**
+   * Set the default opener used when no per-extension association exists.
+   */
+  const setDefaultOpener = useCallback((openerType: FileOpenerType, systemApp?: SystemAppInfo) => {
+    updateDefaultOpener({ openerType, systemApp });
+  }, []);
+
+  /**
+   * Remove the default opener.
+   */
+  const removeDefaultOpener = useCallback(() => {
+    updateDefaultOpener(null);
+  }, []);
 
   /**
    * Set the opener type for a specific extension
    */
   const setOpenerForExtension = useCallback((
-    extension: string, 
+    extension: string,
     openerType: FileOpenerType,
     systemApp?: SystemAppInfo
   ) => {
@@ -109,7 +176,7 @@ export function useSftpFileAssociations() {
   }, []);
 
   /**
-   * Get all associations as an array
+   * Get all per-extension associations as an array.
    */
   const getAllAssociations = useCallback((): FileAssociation[] => {
     return Object.entries(associations).map(([extension, entry]: [string, FileAssociationEntry]) => ({
@@ -129,6 +196,9 @@ export function useSftpFileAssociations() {
   return {
     associations,
     getOpenerForFile,
+    getDefaultOpener,
+    setDefaultOpener,
+    removeDefaultOpener,
     setOpenerForExtension,
     removeAssociation,
     getAllAssociations,

application/state/useSftpState.ts

@@ -57,6 +57,7 @@ export const useSftpState = (
     getActivePane,
     updateTab,
     updateActiveTab,
+    clearSelectionsExcept,
     setTabShowHiddenFiles,
     addTab,
     closeTab,
@@ -110,6 +111,30 @@ export const useSftpState = (
     }
   }, []);
 
+  const getPaneByConnectionId = useCallback((connectionId: string) => {
+    for (const tab of leftTabsRef.current.tabs) {
+      if (tab.connection?.id === connectionId) return tab;
+    }
+    for (const tab of rightTabsRef.current.tabs) {
+      if (tab.connection?.id === connectionId) return tab;
+    }
+    return null;
+  }, [leftTabsRef, rightTabsRef]);
+
+  const getTabByConnectionId = useCallback((connectionId: string) => {
+    for (const tab of leftTabsRef.current.tabs) {
+      if (tab.connection?.id === connectionId) {
+        return { side: "left" as const, tabId: tab.id, pane: tab };
+      }
+    }
+    for (const tab of rightTabsRef.current.tabs) {
+      if (tab.connection?.id === connectionId) {
+        return { side: "right" as const, tabId: tab.id, pane: tab };
+      }
+    }
+    return null;
+  }, [leftTabsRef, rightTabsRef]);
+
   // Ref to track pending reconnections to avoid multiple reconnect attempts
   const reconnectingRef = useRef<{ left: boolean; right: boolean }>({
     left: false,
@@ -183,10 +208,14 @@ export const useSftpState = (
     selectAll,
     getFilteredFiles,
     createDirectory,
+    createDirectoryAtPath,
     createFile,
+    createFileAtPath,
     deleteFiles,
     deleteFilesAtPath,
     renameFile,
+    renameFileAtPath,
+    moveEntriesToPath,
     changePermissions,
   } = useSftpPaneActions({
     hosts,
@@ -207,6 +236,7 @@ export const useSftpState = (
     listRemoteFiles,
     handleSessionError,
     isSessionError,
+    clearSelectionsExcept,
     dirCacheTtlMs: DIR_CACHE_TTL_MS,
   });
 
@@ -244,6 +274,7 @@ export const useSftpState = (
     conflicts,
     activeTransfersCount,
     startTransfer,
+    downloadToLocal,
     addExternalUpload,
     updateExternalUpload,
     cancelTransfer,
@@ -254,8 +285,13 @@ export const useSftpState = (
     resolveConflict,
   } = useSftpTransfers({
     getActivePane,
+    getPaneByConnectionId,
+    getTabByConnectionId,
+    updateTab,
     refresh,
+    clearCacheForConnection,
     sftpSessionsRef,
+    connectionCacheKeyMapRef,
     listLocalFiles,
     listRemoteFiles,
     handleSessionError,
@@ -305,15 +341,20 @@ export const useSftpState = (
     toggleSelection,
     rangeSelect,
     clearSelection,
+    clearSelectionsExcept,
     selectAll,
     setFilter,
     setFilenameEncoding,
     setShowHiddenFiles,
     createDirectory,
+    createDirectoryAtPath,
     createFile,
+    createFileAtPath,
     deleteFiles,
     deleteFilesAtPath,
     renameFile,
+    renameFileAtPath,
+    moveEntriesToPath,
     changePermissions,
     readTextFile,
     readBinaryFile,
@@ -324,6 +365,7 @@ export const useSftpState = (
     cancelExternalUpload,
     selectApplication,
     startTransfer,
+    downloadToLocal,
     addExternalUpload,
     updateExternalUpload,
     cancelTransfer,
@@ -332,6 +374,7 @@ export const useSftpState = (
     dismissTransfer,
     resolveConflict,
     getSftpIdForConnection,
+    reportSessionError: handleSessionError,
   });
   methodsRef.current = {
     getFilteredFiles,
@@ -352,15 +395,20 @@ export const useSftpState = (
     toggleSelection,
     rangeSelect,
     clearSelection,
+    clearSelectionsExcept,
     selectAll,
     setFilter,
     setFilenameEncoding,
     setShowHiddenFiles,
     createDirectory,
+    createDirectoryAtPath,
     createFile,
+    createFileAtPath,
     deleteFiles,
     deleteFilesAtPath,
     renameFile,
+    renameFileAtPath,
+    moveEntriesToPath,
     changePermissions,
     readTextFile,
     readBinaryFile,
@@ -371,6 +419,7 @@ export const useSftpState = (
     cancelExternalUpload,
     selectApplication,
     startTransfer,
+    downloadToLocal,
     addExternalUpload,
     updateExternalUpload,
     cancelTransfer,
@@ -379,6 +428,7 @@ export const useSftpState = (
     dismissTransfer,
     resolveConflict,
     getSftpIdForConnection,
+    reportSessionError: handleSessionError,
   };
 
   // Create stable method wrappers that call through methodsRef
@@ -402,6 +452,8 @@ export const useSftpState = (
     toggleSelection: (...args: Parameters<typeof toggleSelection>) => methodsRef.current.toggleSelection(...args),
     rangeSelect: (...args: Parameters<typeof rangeSelect>) => methodsRef.current.rangeSelect(...args),
     clearSelection: (...args: Parameters<typeof clearSelection>) => methodsRef.current.clearSelection(...args),
+    clearSelectionsExcept: (...args: Parameters<typeof clearSelectionsExcept>) =>
+      methodsRef.current.clearSelectionsExcept(...args),
     selectAll: (...args: Parameters<typeof selectAll>) => methodsRef.current.selectAll(...args),
     setFilter: (...args: Parameters<typeof setFilter>) => methodsRef.current.setFilter(...args),
     setFilenameEncoding: (...args: Parameters<typeof setFilenameEncoding>) =>
@@ -409,11 +461,17 @@ export const useSftpState = (
     setShowHiddenFiles: (...args: Parameters<typeof setShowHiddenFiles>) =>
       methodsRef.current.setShowHiddenFiles(...args),
     createDirectory: (...args: Parameters<typeof createDirectory>) => methodsRef.current.createDirectory(...args),
+    createDirectoryAtPath: (...args: Parameters<typeof createDirectoryAtPath>) =>
+      methodsRef.current.createDirectoryAtPath(...args),
     createFile: (...args: Parameters<typeof createFile>) => methodsRef.current.createFile(...args),
+    createFileAtPath: (...args: Parameters<typeof createFileAtPath>) =>
+      methodsRef.current.createFileAtPath(...args),
     deleteFiles: (...args: Parameters<typeof deleteFiles>) => methodsRef.current.deleteFiles(...args),
     deleteFilesAtPath: (...args: Parameters<typeof deleteFilesAtPath>) =>
       methodsRef.current.deleteFilesAtPath(...args),
     renameFile: (...args: Parameters<typeof renameFile>) => methodsRef.current.renameFile(...args),
+    renameFileAtPath: (...args: Parameters<typeof renameFileAtPath>) => methodsRef.current.renameFileAtPath(...args),
+    moveEntriesToPath: (...args: Parameters<typeof moveEntriesToPath>) => methodsRef.current.moveEntriesToPath(...args),
     changePermissions: (...args: Parameters<typeof changePermissions>) => methodsRef.current.changePermissions(...args),
     readTextFile: (...args: Parameters<typeof readTextFile>) => methodsRef.current.readTextFile(...args),
     readBinaryFile: (...args: Parameters<typeof readBinaryFile>) => methodsRef.current.readBinaryFile(...args),
@@ -425,6 +483,7 @@ export const useSftpState = (
     cancelExternalUpload: () => methodsRef.current.cancelExternalUpload(),
     selectApplication: () => methodsRef.current.selectApplication(),
     startTransfer: (...args: Parameters<typeof startTransfer>) => methodsRef.current.startTransfer(...args),
+    downloadToLocal: (...args: Parameters<typeof downloadToLocal>) => methodsRef.current.downloadToLocal(...args),
     addExternalUpload: (...args: Parameters<typeof addExternalUpload>) => methodsRef.current.addExternalUpload(...args),
     updateExternalUpload: (...args: Parameters<typeof updateExternalUpload>) => methodsRef.current.updateExternalUpload(...args),
     cancelTransfer: (...args: Parameters<typeof cancelTransfer>) => methodsRef.current.cancelTransfer(...args),
@@ -433,6 +492,7 @@ export const useSftpState = (
     dismissTransfer: (...args: Parameters<typeof dismissTransfer>) => methodsRef.current.dismissTransfer(...args),
     resolveConflict: (...args: Parameters<typeof resolveConflict>) => methodsRef.current.resolveConflict(...args),
     getSftpIdForConnection: (...args: Parameters<typeof getSftpIdForConnection>) => methodsRef.current.getSftpIdForConnection(...args),
+    reportSessionError: (...args: Parameters<typeof handleSessionError>) => methodsRef.current.reportSessionError(...args),
     activeFileWatchCountRef,
   }), [activeFileWatchCountRef]); // activeFileWatchCountRef is a stable ref
 

application/state/useStoredBoolean.ts

@@ -1,8 +1,10 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
 
 /**
  * Hook for persisting a boolean value to localStorage.
+ * Syncs across components in the same window via a custom event,
+ * and across windows via the native storage event.
  * @param storageKey - The key to use for localStorage
  * @param fallback - The default value if no stored value exists (defaults to false)
  * @returns A tuple of [value, setValue] similar to useState
@@ -16,9 +18,38 @@ export const useStoredBoolean = (
         return stored ?? fallback;
     });
 
-    useEffect(() => {
-        localStorageAdapter.writeBoolean(storageKey, value);
-    }, [storageKey, value]);
+    const setAndPersist = useCallback((next: boolean | ((prev: boolean) => boolean)) => {
+        setValue((prev) => {
+            const resolved = typeof next === "function" ? next(prev) : next;
+            localStorageAdapter.writeBoolean(storageKey, resolved);
+            // Notify other same-window consumers
+            window.dispatchEvent(
+                new CustomEvent("stored-boolean-change", { detail: { key: storageKey, value: resolved } }),
+            );
+            return resolved;
+        });
+    }, [storageKey]);
 
-    return [value, setValue] as const;
+    useEffect(() => {
+        // Sync from other components in the same window
+        const handleCustom = (e: Event) => {
+            const { key, value: newValue } = (e as CustomEvent).detail;
+            if (key === storageKey) setValue(newValue);
+        };
+        // Sync from other windows
+        const handleStorage = (e: StorageEvent) => {
+            if (e.key === storageKey) {
+                const stored = localStorageAdapter.readBoolean(storageKey);
+                setValue(stored ?? fallback);
+            }
+        };
+        window.addEventListener("stored-boolean-change", handleCustom);
+        window.addEventListener("storage", handleStorage);
+        return () => {
+            window.removeEventListener("stored-boolean-change", handleCustom);
+            window.removeEventListener("storage", handleStorage);
+        };
+    }, [storageKey, fallback]);
+
+    return [value, setAndPersist] as const;
 };

application/state/useVaultState.ts

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { normalizeDistroId, sanitizeHost } from "../../domain/host";
 import {
   ConnectionLog,
+  GroupConfig,
   Host,
   Identity,
   KeyCategory,
@@ -17,6 +18,7 @@ import {
 } from "../../infrastructure/config/defaultData";
 import {
   STORAGE_KEY_CONNECTION_LOGS,
+  STORAGE_KEY_GROUP_CONFIGS,
   STORAGE_KEY_GROUPS,
   STORAGE_KEY_HOSTS,
   STORAGE_KEY_IDENTITIES,
@@ -30,9 +32,11 @@ import {
 } from "../../infrastructure/config/storageKeys";
 import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
 import {
+  decryptGroupConfigs,
   decryptHosts,
   decryptIdentities,
   decryptKeys,
+  encryptGroupConfigs,
   encryptHosts,
   encryptIdentities,
   encryptKeys,
@@ -46,6 +50,7 @@ type ExportableVaultData = {
   customGroups: string[];
   snippetPackages?: string[];
   knownHosts?: KnownHost[];
+  groupConfigs?: GroupConfig[];
 };
 
 type LegacyKeyRecord = Record<string, unknown> & { id?: string; source?: string };
@@ -107,6 +112,7 @@ export const useVaultState = () => {
   const [shellHistory, setShellHistory] = useState<ShellHistoryEntry[]>([]);
   const [connectionLogs, setConnectionLogs] = useState<ConnectionLog[]>([]);
   const [managedSources, setManagedSources] = useState<ManagedSource[]>([]);
+  const [groupConfigs, setGroupConfigs] = useState<GroupConfig[]>([]);
 
   // Write-version counters prevent out-of-order async writes from overwriting
   // newer data.  Each update bumps the counter; the .then() callback only
@@ -114,6 +120,7 @@ export const useVaultState = () => {
   const hostsWriteVersion = useRef(0);
   const keysWriteVersion = useRef(0);
   const identitiesWriteVersion = useRef(0);
+  const groupConfigsWriteVersion = useRef(0);
 
   // Read-sequence counters for cross-window storage events.  Each incoming
   // event bumps the counter; the async decrypt callback only applies state if
@@ -122,6 +129,7 @@ export const useVaultState = () => {
   const hostsReadSeq = useRef(0);
   const keysReadSeq = useRef(0);
   const identitiesReadSeq = useRef(0);
+  const groupConfigsReadSeq = useRef(0);
 
   const updateHosts = useCallback((data: Host[]) => {
     const cleaned = data.map(sanitizeHost);
@@ -176,6 +184,15 @@ export const useVaultState = () => {
     localStorageAdapter.write(STORAGE_KEY_MANAGED_SOURCES, data);
   }, []);
 
+  const updateGroupConfigs = useCallback((data: GroupConfig[]) => {
+    setGroupConfigs(data);
+    const ver = ++groupConfigsWriteVersion.current;
+    encryptGroupConfigs(data).then((enc) => {
+      if (ver === groupConfigsWriteVersion.current)
+        localStorageAdapter.write(STORAGE_KEY_GROUP_CONFIGS, enc);
+    });
+  }, []);
+
   const clearVaultData = useCallback(() => {
     updateHosts([]);
     updateKeys([]);
@@ -185,6 +202,7 @@ export const useVaultState = () => {
     updateCustomGroups([]);
     updateKnownHosts([]);
     updateManagedSources([]);
+    updateGroupConfigs([]);
     localStorageAdapter.remove(STORAGE_KEY_LEGACY_KEYS);
   }, [
     updateHosts,
@@ -195,6 +213,7 @@ export const useVaultState = () => {
     updateCustomGroups,
     updateKnownHosts,
     updateManagedSources,
+    updateGroupConfigs,
   ]);
 
   const addShellHistoryEntry = useCallback(
@@ -430,6 +449,20 @@ export const useVaultState = () => {
         STORAGE_KEY_MANAGED_SOURCES,
       );
       if (savedManagedSources) setManagedSources(savedManagedSources);
+
+      // Load group configs
+      const savedGroupConfigs = localStorageAdapter.read<GroupConfig[]>(STORAGE_KEY_GROUP_CONFIGS);
+      if (savedGroupConfigs) {
+        const gcVer = ++groupConfigsWriteVersion.current;
+        const decryptedGC = await decryptGroupConfigs(savedGroupConfigs);
+        if (gcVer === groupConfigsWriteVersion.current) {
+          setGroupConfigs(decryptedGC);
+          encryptGroupConfigs(decryptedGC).then((enc) => {
+            if (gcVer === groupConfigsWriteVersion.current)
+              localStorageAdapter.write(STORAGE_KEY_GROUP_CONFIGS, enc);
+          });
+        }
+      }
     };
 
     init();
@@ -529,6 +562,19 @@ export const useVaultState = () => {
       if (key === STORAGE_KEY_MANAGED_SOURCES) {
         const next = safeParse<ManagedSource[]>(event.newValue) ?? [];
         setManagedSources(next);
+        return;
+      }
+
+      if (key === STORAGE_KEY_GROUP_CONFIGS) {
+        const next = safeParse<GroupConfig[]>(event.newValue) ?? [];
+        ++groupConfigsWriteVersion.current;
+        const seq = ++groupConfigsReadSeq.current;
+        const writeAtStart = groupConfigsWriteVersion.current;
+        decryptGroupConfigs(next).then((dec) => {
+          if (seq === groupConfigsReadSeq.current && writeAtStart === groupConfigsWriteVersion.current)
+            setGroupConfigs(dec);
+        });
+        return;
       }
     };
 
@@ -536,6 +582,20 @@ export const useVaultState = () => {
     return () => window.removeEventListener("storage", handleStorage);
   }, []);
 
+  const updateHostLastConnected = useCallback((hostId: string) => {
+    setHosts((prev) => {
+      const next = prev.map((h) =>
+        h.id === hostId ? { ...h, lastConnectedAt: Date.now() } : h,
+      );
+      const ver = ++hostsWriteVersion.current;
+      encryptHosts(next).then((enc) => {
+        if (ver === hostsWriteVersion.current)
+          localStorageAdapter.write(STORAGE_KEY_HOSTS, enc);
+      });
+      return next;
+    });
+  }, []);
+
   const updateHostDistro = useCallback((hostId: string, distro: string) => {
     const normalized = normalizeDistroId(distro);
     setHosts((prev) => {
@@ -560,8 +620,9 @@ export const useVaultState = () => {
       customGroups,
       snippetPackages,
       knownHosts,
+      groupConfigs,
     }),
-    [hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts],
+    [hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts, groupConfigs],
   );
 
   const importData = useCallback(
@@ -573,6 +634,7 @@ export const useVaultState = () => {
       if (payload.customGroups) updateCustomGroups(payload.customGroups);
       if (payload.snippetPackages) updateSnippetPackages(payload.snippetPackages);
       if (payload.knownHosts) updateKnownHosts(payload.knownHosts);
+      if (Array.isArray(payload.groupConfigs)) updateGroupConfigs(payload.groupConfigs);
     },
     [
       updateHosts,
@@ -582,6 +644,7 @@ export const useVaultState = () => {
       updateCustomGroups,
       updateSnippetPackages,
       updateKnownHosts,
+      updateGroupConfigs,
     ],
   );
 
@@ -604,6 +667,7 @@ export const useVaultState = () => {
     shellHistory,
     connectionLogs,
     managedSources,
+    groupConfigs,
     updateHosts,
     updateKeys,
     updateIdentities,
@@ -612,6 +676,7 @@ export const useVaultState = () => {
     updateCustomGroups,
     updateKnownHosts,
     updateManagedSources,
+    updateGroupConfigs,
     addShellHistoryEntry,
     clearShellHistory,
     addConnectionLog,
@@ -620,6 +685,7 @@ export const useVaultState = () => {
     deleteConnectionLog,
     clearUnsavedConnectionLogs,
     updateHostDistro,
+    updateHostLastConnected,
     convertKnownHostToHost,
     exportData,
     importDataFromString,

application/syncPayload.ts

@@ -8,15 +8,18 @@
  */
 
 import type {
+  GroupConfig,
   Host,
   Identity,
   KnownHost,
   PortForwardingRule,
+  SftpBookmark,
   Snippet,
   SSHKey,
 } from '../domain/models';
 import type { SyncPayload } from '../domain/sync';
 import { localStorageAdapter } from '../infrastructure/persistence/localStorageAdapter';
+import { rehydrateGlobalBookmarks } from '../components/sftp/hooks/useGlobalSftpBookmarks';
 import {
   STORAGE_KEY_THEME,
   STORAGE_KEY_UI_THEME_LIGHT,
@@ -37,8 +40,9 @@ import {
   STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES,
   STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD,
   STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR,
+  STORAGE_KEY_SFTP_GLOBAL_BOOKMARKS,
   STORAGE_KEY_CUSTOM_THEMES,
-  STORAGE_KEY_IMMERSIVE_MODE,
+  STORAGE_KEY_SHOW_RECENT_HOSTS,
 } from '../infrastructure/config/storageKeys';
 
 // ---------------------------------------------------------------------------
@@ -54,6 +58,7 @@ export interface SyncableVaultData {
   customGroups: string[];
   snippetPackages?: string[];
   knownHosts: KnownHost[];
+  groupConfigs?: GroupConfig[];
 }
 
 /** Callbacks used by `applySyncPayload` to import data into local state. */
@@ -161,9 +166,13 @@ 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';
+  // SFTP Bookmarks (global only — local bookmarks are device-specific)
+  const globalBookmarks = localStorageAdapter.read<SftpBookmark[]>(STORAGE_KEY_SFTP_GLOBAL_BOOKMARKS);
+  if (globalBookmarks && Array.isArray(globalBookmarks)) settings.sftpGlobalBookmarks = globalBookmarks;
+
+
+  const showRecent = localStorageAdapter.readBoolean(STORAGE_KEY_SHOW_RECENT_HOSTS);
+  if (showRecent != null) settings.showRecentHosts = showRecent;
 
   return Object.keys(settings).length > 0 ? settings : undefined;
 }
@@ -224,8 +233,11 @@ function applySyncableSettings(settings: NonNullable<SyncPayload['settings']>):
   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));
+  // SFTP Bookmarks (global only)
+  if (settings.sftpGlobalBookmarks != null) localStorageAdapter.write(STORAGE_KEY_SFTP_GLOBAL_BOOKMARKS, settings.sftpGlobalBookmarks);
+
+  // Immersive mode (legacy — always enabled, ignore incoming value)
+  if (settings.showRecentHosts != null) localStorageAdapter.writeBoolean(STORAGE_KEY_SHOW_RECENT_HOSTS, settings.showRecentHosts);
 }
 
 // ---------------------------------------------------------------------------
@@ -251,6 +263,7 @@ export function buildSyncPayload(
     customGroups: vault.customGroups,
     snippetPackages: vault.snippetPackages,
     knownHosts: vault.knownHosts,
+    groupConfigs: vault.groupConfigs,
     portForwardingRules,
     settings: collectSyncableSettings(),
     syncedAt: Date.now(),
@@ -284,6 +297,9 @@ export function applySyncPayload(
   if (payload.knownHosts !== undefined) {
     vaultImport.knownHosts = payload.knownHosts;
   }
+  if (Array.isArray(payload.groupConfigs)) {
+    vaultImport.groupConfigs = payload.groupConfigs;
+  }
 
   importers.importVaultData(JSON.stringify(vaultImport));
 
@@ -298,6 +314,8 @@ export function applySyncPayload(
   // Apply synced settings
   if (payload.settings) {
     applySyncableSettings(payload.settings);
+    // Rehydrate in-memory bookmark snapshot after localStorage was updated
+    if (payload.settings.sftpGlobalBookmarks != null) rehydrateGlobalBookmarks();
     importers.onSettingsApplied?.();
   }
 }

components/AIChatSidePanel.tsx

@@ -21,6 +21,7 @@ import { useI18n } from '../application/i18n/I18nProvider';
 import { useWindowControls } from '../application/state/useWindowControls';
 import { useFileUpload } from '../application/state/useFileUpload';
 import type {
+  AgentModelPreset,
   AIPermissionMode,
   AISession,
   AISessionScope,
@@ -43,6 +44,20 @@ import { clearAllPendingApprovals } from '../infrastructure/ai/shared/approvalGa
 import { useConversationExport } from './ai/hooks/useConversationExport';
 import type { ExecutorContext } from '../infrastructure/ai/cattyAgent/executor';
 
+function isCopilotAgentConfig(agent?: ExternalAgentConfig): boolean {
+  if (!agent) return false;
+  const tokens = [
+    agent.id,
+    agent.name,
+    agent.icon,
+    agent.command,
+    agent.acpCommand,
+  ]
+    .filter((value): value is string => typeof value === 'string' && value.length > 0)
+    .map((value) => value.split('/').pop()?.toLowerCase() ?? value.toLowerCase());
+  return tokens.some((token) => token.includes('copilot'));
+}
+
 // -------------------------------------------------------------------
 // Props
 // -------------------------------------------------------------------
@@ -56,6 +71,7 @@ interface AIChatSidePanelProps {
   deleteSession: (sessionId: string, scopeKey?: string) => void;
   updateSessionTitle: (sessionId: string, title: string) => void;
   updateSessionExternalSessionId: (sessionId: string, externalSessionId: string | undefined) => void;
+  retargetSessionScope: (sessionId: string, scope: AISessionScope) => void;
   addMessageToSession: (sessionId: string, message: ChatMessage) => void;
   updateLastMessage: (
     sessionId: string,
@@ -103,6 +119,7 @@ interface AIChatSidePanelProps {
     username?: string;
     protocol?: string;
     shellType?: string;
+    deviceType?: string;
     connected: boolean;
   }>;
   resolveExecutorContext?: (scope: {
@@ -152,6 +169,27 @@ function buildAcpHistoryMessages(messages: ChatMessage[]): Array<{ role: 'user'
   });
 }
 
+function getSessionScopeMatchRank(
+  session: AISession,
+  scopeType: 'terminal' | 'workspace',
+  scopeTargetId?: string,
+  scopeHostIds?: string[],
+  activeTerminalTargetIds?: Set<string>,
+): number {
+  if (session.scope.type !== scopeType) return 0;
+  if (session.scope.targetId === scopeTargetId) return 2;
+
+  if (scopeType !== 'terminal' || !scopeHostIds?.length || !session.scope.hostIds?.length) {
+    return 0;
+  }
+
+  if (session.scope.targetId && activeTerminalTargetIds?.has(session.scope.targetId)) {
+    return 0;
+  }
+
+  return session.scope.hostIds.some((hostId) => scopeHostIds.includes(hostId)) ? 1 : 0;
+}
+
 // -------------------------------------------------------------------
 // Component
 // -------------------------------------------------------------------
@@ -164,6 +202,7 @@ const AIChatSidePanelInner: React.FC<AIChatSidePanelProps> = ({
   deleteSession,
   updateSessionTitle,
   updateSessionExternalSessionId,
+  retargetSessionScope,
   addMessageToSession,
   updateLastMessage,
   updateMessageById,
@@ -227,21 +266,115 @@ const AIChatSidePanelInner: React.FC<AIChatSidePanelProps> = ({
 
 
   // Per-scope active session ID
-  const activeSessionId = activeSessionIdMap[scopeKey] ?? null;
-  const isStreaming = activeSessionId ? streamingSessionIds.has(activeSessionId) : false;
+  const activeSessionIdForScope = activeSessionIdMap[scopeKey] ?? null;
   const setActiveSessionId = useCallback((id: string | null) => {
     setActiveSessionIdForScope(scopeKey, id);
   }, [scopeKey, setActiveSessionIdForScope]);
 
-  // Restore agent selector from active session when scope changes
-  useEffect(() => {
-    if (activeSessionId) {
-      const session = sessions.find((s) => s.id === activeSessionId);
-      if (session) {
-        setCurrentAgentId(session.agentId);
+  const activeTerminalTargetIds = useMemo(() => {
+    const targetIds = new Set<string>();
+    for (const [sessionScopeKey, sessionId] of Object.entries(activeSessionIdMap)) {
+      if (!sessionScopeKey.startsWith('terminal:') || !sessionId) continue;
+      const targetId = sessionScopeKey.slice('terminal:'.length);
+      if (!targetId || targetId === scopeTargetId) continue;
+      targetIds.add(targetId);
+    }
+    return targetIds;
+  }, [activeSessionIdMap, scopeTargetId]);
+
+  const historySessions = useMemo(
+    () =>
+      sessions
+        .map((session) => ({
+          session,
+          matchRank: getSessionScopeMatchRank(session, scopeType, scopeTargetId, scopeHostIds, activeTerminalTargetIds),
+        }))
+        .filter(({ matchRank }) => matchRank > 0)
+        .sort((a, b) => b.matchRank - a.matchRank || b.session.updatedAt - a.session.updatedAt)
+        .map(({ session }) => session),
+    [sessions, scopeType, scopeTargetId, scopeHostIds, activeTerminalTargetIds],
+  );
+
+  const activeSession = useMemo(() => {
+    if (activeSessionIdForScope) {
+      const session = sessions.find((s) => s.id === activeSessionIdForScope);
+      if (session && getSessionScopeMatchRank(session, scopeType, scopeTargetId, scopeHostIds, activeTerminalTargetIds) > 0) {
+        return session;
       }
     }
-  }, [scopeKey, activeSessionId, sessions]);
+    return historySessions[0] ?? null;
+  }, [sessions, activeSessionIdForScope, historySessions, scopeType, scopeTargetId, scopeHostIds, activeTerminalTargetIds]);
+
+  const activeSessionId = activeSession?.id ?? activeSessionIdForScope;
+  const isStreaming = activeSessionId ? streamingSessionIds.has(activeSessionId) : false;
+
+  const shouldRetargetActiveSession = useMemo(() => {
+    if (!activeSession || scopeType !== 'terminal' || !scopeTargetId || !scopeHostIds?.length) {
+      return false;
+    }
+
+    if (activeSession.scope.type !== scopeType || activeSession.scope.targetId === scopeTargetId) {
+      return false;
+    }
+
+    // Don't retarget sessions that are actively owned by another terminal
+    if (activeSession.scope.targetId && activeTerminalTargetIds.has(activeSession.scope.targetId)) {
+      return false;
+    }
+
+    return activeSession.scope.hostIds?.some((hostId) => scopeHostIds.includes(hostId)) ?? false;
+  }, [activeSession, scopeType, scopeTargetId, scopeHostIds, activeTerminalTargetIds]);
+
+  useEffect(() => {
+    if (!activeSession) return;
+
+    if (shouldRetargetActiveSession && isVisible) {
+      // Full cleanup of any in-flight work — the session came from a disconnected
+      // terminal, so any active response, pending approvals, or exec is dead.
+      if (streamingSessionIds.has(activeSession.id)) {
+        const controller = abortControllersRef.current.get(activeSession.id);
+        if (controller) {
+          controller.abort();
+          abortControllersRef.current.delete(activeSession.id);
+        }
+        setStreamingForScope(activeSession.id, false);
+        clearAllPendingApprovals(activeSession.id);
+        const bridge = getNetcattyBridge();
+        bridge?.aiCattyCancelExec?.(activeSession.id);
+        bridge?.aiAcpCancel?.('', activeSession.id);
+      }
+      retargetSessionScope(activeSession.id, {
+        type: scopeType,
+        targetId: scopeTargetId,
+        hostIds: scopeHostIds,
+      });
+      return;
+    }
+
+    if (isVisible && activeSessionIdForScope !== activeSession.id) {
+      setActiveSessionId(activeSession.id);
+    }
+  }, [
+    activeSession,
+    activeSessionIdForScope,
+    retargetSessionScope,
+    isVisible,
+    scopeHostIds,
+    scopeTargetId,
+    scopeType,
+    setActiveSessionId,
+    setStreamingForScope,
+    shouldRetargetActiveSession,
+    streamingSessionIds,
+    abortControllersRef,
+  ]);
+
+  // Restore agent selector from active session when scope changes
+  useEffect(() => {
+    if (activeSession) {
+      setCurrentAgentId(activeSession.agentId);
+    }
+  }, [scopeKey, activeSession]);
 
   // Proactively sync terminal session metadata to main process whenever scope or sessions change
   useEffect(() => {
@@ -294,12 +427,6 @@ const AIChatSidePanelInner: React.FC<AIChatSidePanelProps> = ({
     [enableAgent, setExternalAgents],
   );
 
-  // Active session (scoped)
-  const activeSession = useMemo(
-    () => sessions.find((s) => s.id === activeSessionId) ?? null,
-    [sessions, activeSessionId],
-  );
-
   const messages = activeSession?.messages ?? [];
 
   // ── Export hook ──
@@ -313,15 +440,62 @@ const AIChatSidePanelInner: React.FC<AIChatSidePanelProps> = ({
 
   const providerDisplayName = activeProvider?.name ?? '';
   const modelDisplayName = activeModelId || activeProvider?.defaultModel || '';
+  const [runtimeAgentModelPresets, setRuntimeAgentModelPresets] = useState<Record<string, AgentModelPreset[]>>({});
 
   // Agent model presets for the current external agent
   const currentAgentConfig = useMemo(
     () => currentAgentId !== 'catty' ? externalAgents.find(a => a.id === currentAgentId) : undefined,
     [currentAgentId, externalAgents],
   );
+  const isCopilotExternalAgent = useMemo(
+    () => isCopilotAgentConfig(currentAgentConfig),
+    [currentAgentConfig],
+  );
+
+  // Ref to read agentModelMap inside the effect without re-triggering it
+  // when setAgentModel updates the map (avoids double ACP spawn).
+  const agentModelMapRef = useRef(agentModelMap);
+  agentModelMapRef.current = agentModelMap;
+
+  useEffect(() => {
+    if (!currentAgentConfig?.acpCommand) return;
+    if (!isCopilotExternalAgent) return;
+
+    const bridge = getNetcattyBridge();
+    if (!bridge?.aiAcpListModels) return;
+
+    let cancelled = false;
+    void bridge.aiAcpListModels(
+      currentAgentConfig.acpCommand,
+      currentAgentConfig.acpArgs || [],
+      undefined,
+      undefined,
+      `models_${currentAgentId}`,
+    ).then((result) => {
+      if (cancelled || !result?.ok || !Array.isArray(result.models)) return;
+      const knownModelIds = new Set(result.models.map((model) => model.id));
+      setRuntimeAgentModelPresets((prev) => ({
+        ...prev,
+        [currentAgentId]: result.models ?? [],
+      }));
+      const storedModelId = agentModelMapRef.current[currentAgentId];
+      if (result.currentModelId && (!storedModelId || !knownModelIds.has(storedModelId))) {
+        setAgentModel(currentAgentId, result.currentModelId);
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        console.warn('[AIChatSidePanel] Failed to load ACP agent models:', err);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [currentAgentConfig, currentAgentId, isCopilotExternalAgent, setAgentModel]);
+
   const agentModelPresets = useMemo(
-    () => getAgentModelPresets(currentAgentConfig?.command),
-    [currentAgentConfig?.command],
+    () => runtimeAgentModelPresets[currentAgentId] ?? getAgentModelPresets(currentAgentConfig?.command),
+    [currentAgentId, currentAgentConfig?.command, runtimeAgentModelPresets],
   );
 
   // Per-agent model: recall last selection or use first preset as default
@@ -345,15 +519,6 @@ const AIChatSidePanelInner: React.FC<AIChatSidePanelProps> = ({
     setAgentModel(currentAgentId, modelId);
   }, [currentAgentId, setAgentModel]);
 
-  // Filtered sessions for history (matching current scope type)
-  const historySessions = useMemo(
-    () =>
-      sessions
-        .filter((s) => s.scope.type === scopeType && s.scope.targetId === scopeTargetId)
-        .sort((a, b) => b.updatedAt - a.updatedAt),
-    [sessions, scopeType, scopeTargetId],
-  );
-
   // -------------------------------------------------------------------
   // Handlers
   // -------------------------------------------------------------------
@@ -420,14 +585,34 @@ const AIChatSidePanelInner: React.FC<AIChatSidePanelProps> = ({
 
   /** Ensure a session exists for the current scope and return its ID. */
   const ensureSession = useCallback((): string => {
-    if (activeSessionId && sessionsRef.current.some((session) => session.id === activeSessionId)) {
-      return activeSessionId;
+    if (activeSession && sessionsRef.current.some((session) => session.id === activeSession.id)) {
+      if (shouldRetargetActiveSession) {
+        retargetSessionScope(activeSession.id, {
+          type: scopeType,
+          targetId: scopeTargetId,
+          hostIds: scopeHostIds,
+        });
+      } else if (activeSessionIdForScope !== activeSession.id) {
+        setActiveSessionId(activeSession.id);
+      }
+      return activeSession.id;
     }
     const scope: AISessionScope = { type: scopeType, targetId: scopeTargetId, hostIds: scopeHostIds };
     const session = createSession(scope, currentAgentId);
     setActiveSessionId(session.id);
     return session.id;
-  }, [activeSessionId, scopeType, scopeTargetId, scopeHostIds, currentAgentId, createSession, setActiveSessionId]);
+  }, [
+    activeSession,
+    activeSessionIdForScope,
+    createSession,
+    currentAgentId,
+    retargetSessionScope,
+    scopeHostIds,
+    scopeTargetId,
+    scopeType,
+    setActiveSessionId,
+    shouldRetargetActiveSession,
+  ]);
 
   // -------------------------------------------------------------------
   // Main send handler (thin orchestrator)
@@ -470,7 +655,9 @@ const AIChatSidePanelInner: React.FC<AIChatSidePanelProps> = ({
     const assistantMsgId = generateId();
     addMessageToSession(sessionId, {
       id: assistantMsgId, role: 'assistant', content: '', timestamp: Date.now(),
-      model: isExternalAgent ? (agentConfig?.name || 'external') : (activeModelId || activeProvider?.defaultModel || ''),
+      model: isExternalAgent
+        ? (selectedAgentModel || agentConfig?.name || 'external')
+        : (activeModelId || activeProvider?.defaultModel || ''),
       providerId: isExternalAgent ? undefined : activeProvider?.providerId,
     });
 
@@ -747,9 +934,12 @@ const SessionHistoryDrawer: React.FC<SessionHistoryDrawerProps> = ({
               const timeStr = formatRelativeTime(time, t);
 
               return (
-                <button
+                <div
                   key={session.id}
+                  role="button"
+                  tabIndex={0}
                   onClick={() => onSelect(session.id)}
+                  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onSelect(session.id); }}
                   className={cn(
                     'w-full flex items-center justify-between py-2.5 border-b border-border/20 text-left transition-colors cursor-pointer group',
                     isActive ? 'text-foreground' : 'text-foreground/70 hover:text-foreground',
@@ -770,7 +960,7 @@ const SessionHistoryDrawer: React.FC<SessionHistoryDrawerProps> = ({
                       <Trash2 size={12} />
                     </button>
                   </div>
-                </button>
+                </div>
               );
             })
           )}

components/CloudSyncSettings.tsx

@@ -102,11 +102,14 @@ interface StatusDotProps {
 }
 
 const StatusDot: React.FC<StatusDotProps> = ({ status, className }) => {
+    if (status === 'connecting') {
+        return <Loader2 className={cn('w-3.5 h-3.5 animate-spin text-muted-foreground', className)} />;
+    }
+
     const colors = {
         connected: 'bg-green-500',
         syncing: 'bg-blue-500 animate-pulse',
         error: 'bg-red-500',
-        connecting: 'bg-yellow-500 animate-pulse',
         disconnected: 'bg-muted-foreground/50',
     };
 
@@ -279,6 +282,7 @@ interface ProviderCardProps {
     disabled?: boolean; // Disable connect button when another provider is connected
     onEdit?: () => void;
     onConnect: () => void;
+    onCancelConnect?: () => void;
     onDisconnect: () => void;
     onSync: () => void;
 }
@@ -296,6 +300,7 @@ const ProviderCard: React.FC<ProviderCardProps> = ({
     disabled,
     onEdit,
     onConnect,
+    onCancelConnect,
     onDisconnect,
     onSync,
 }) => {
@@ -367,7 +372,9 @@ const ProviderCard: React.FC<ProviderCardProps> = ({
                         {error}
                     </p>
                 ) : (
-                    <p className="text-xs text-muted-foreground mt-1">{t('cloudSync.provider.notConnected')}</p>
+                    <p className="text-xs text-muted-foreground mt-1">
+                        {isConnecting ? t('cloudSync.provider.connecting') : t('cloudSync.provider.notConnected')}
+                    </p>
                 )}
             </div>
 
@@ -408,6 +415,16 @@ const ProviderCard: React.FC<ProviderCardProps> = ({
                             <CloudOff size={14} />
                         </Button>
                     </>
+                ) : isConnecting && onCancelConnect ? (
+                    <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={onCancelConnect}
+                        className="gap-1"
+                    >
+                        <X size={14} />
+                        {t('common.cancel')}
+                    </Button>
                 ) : (
                     <Button
                         size="sm"
@@ -800,6 +817,9 @@ const SyncDashboard: React.FC<SyncDashboardProps> = ({
             toast.success(t('cloudSync.connect.github.success'));
         } catch (error) {
             setIsPollingGitHub(false);
+            setShowGitHubModal(false);
+            // Reset provider status so button is clickable again (without tearing down existing connections)
+            sync.resetProviderStatus('github');
             const message = getNetworkErrorMessage(error, t('common.unknownError'));
             toast.error(message, t('cloudSync.connect.github.failedTitle'));
         }
@@ -813,10 +833,13 @@ const SyncDashboard: React.FC<SyncDashboardProps> = ({
             // Note: Auth flow is handled automatically by oauthBridge
             toast.info(t('cloudSync.connect.browserContinue'));
         } catch (error) {
-            toast.error(
-                error instanceof Error ? error.message : t('common.unknownError'),
-                t('cloudSync.connect.google.failedTitle'),
-            );
+            // Reset provider status so button is clickable again (without tearing down existing connections)
+            sync.resetProviderStatus('google');
+            const msg = error instanceof Error ? error.message : t('common.unknownError');
+            // Don't show toast for user-initiated cancellation (popup closed)
+            if (!msg.includes('cancelled')) {
+                toast.error(msg, t('cloudSync.connect.google.failedTitle'));
+            }
         }
     };
 
@@ -828,10 +851,13 @@ const SyncDashboard: React.FC<SyncDashboardProps> = ({
             // Note: Auth flow is handled automatically by oauthBridge
             toast.info(t('cloudSync.connect.browserContinue'));
         } catch (error) {
-            toast.error(
-                error instanceof Error ? error.message : t('common.unknownError'),
-                t('cloudSync.connect.onedrive.failedTitle'),
-            );
+            // Reset provider status so button is clickable again (without tearing down existing connections)
+            sync.resetProviderStatus('onedrive');
+            const msg = error instanceof Error ? error.message : t('common.unknownError');
+            // Don't show toast for user-initiated cancellation (popup closed)
+            if (!msg.includes('cancelled')) {
+                toast.error(msg, t('cloudSync.connect.onedrive.failedTitle'));
+            }
         }
     };
 
@@ -1079,6 +1105,7 @@ const SyncDashboard: React.FC<SyncDashboardProps> = ({
                         error={sync.providers.google.error}
                         disabled={sync.hasAnyConnectedProvider && !isProviderReadyForSync(sync.providers.google)}
                         onConnect={handleConnectGoogle}
+                        onCancelConnect={sync.cancelOAuthConnect}
                         onDisconnect={() => sync.disconnectProvider('google')}
                         onSync={() => handleSync('google')}
                     />
@@ -1095,6 +1122,7 @@ const SyncDashboard: React.FC<SyncDashboardProps> = ({
                         error={sync.providers.onedrive.error}
                         disabled={sync.hasAnyConnectedProvider && !isProviderReadyForSync(sync.providers.onedrive)}
                         onConnect={handleConnectOneDrive}
+                        onCancelConnect={sync.cancelOAuthConnect}
                         onDisconnect={() => sync.disconnectProvider('onedrive')}
                         onSync={() => handleSync('onedrive')}
                     />
@@ -1250,6 +1278,9 @@ const SyncDashboard: React.FC<SyncDashboardProps> = ({
                 onClose={() => {
                     setShowGitHubModal(false);
                     setIsPollingGitHub(false);
+                    // Reset provider status so button is clickable again.
+                    // The background polling will continue until expiry but is harmless.
+                    sync.resetProviderStatus('github');
                 }}
             />
 

components/DistroAvatar.tsx

@@ -65,8 +65,8 @@ const DistroAvatarInner: React.FC<DistroAvatarProps> = ({
 
   // Size variants - all use rounded corners for consistency
   const sizeClasses = {
-    sm: "h-6 w-6 rounded-md",
-    md: "h-11 w-11 rounded-xl",
+    sm: "h-6 w-6 rounded",
+    md: "h-11 w-11 rounded-lg",
     lg: "h-14 w-14 rounded-xl",
   };
   const iconSizes = {
@@ -98,7 +98,7 @@ const DistroAvatarInner: React.FC<DistroAvatarProps> = ({
       <div
         className={cn(
           containerClass,
-          "flex items-center justify-center border border-border/40 overflow-hidden",
+          "flex items-center justify-center overflow-hidden",
           bg,
           className,
         )}

components/HostDetailsPanel.tsx

@@ -25,6 +25,7 @@ import {
   Trash2,
   Variable,
   Wifi,
+  Router,
   X,
 } from "lucide-react";
 import React, { useEffect, useMemo, useState, useCallback } from "react";
@@ -98,6 +99,7 @@ interface HostDetailsPanelProps {
   onCancel: () => void;
   onCreateGroup?: (groupPath: string) => void; // Callback to create a new group
   onCreateTag?: (tag: string) => void; // Callback to create a new tag
+  groupDefaults?: Partial<import('../domain/models').GroupConfig>;
 }
 
 const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
@@ -115,6 +117,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   onCancel,
   onCreateGroup,
   onCreateTag,
+  groupDefaults,
 }) => {
   const { t } = useI18n();
   const { checkSshAgent } = useApplicationBackend();
@@ -125,13 +128,13 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         id: crypto.randomUUID(),
         label: "",
         hostname: "",
-        port: 22,
-        username: "root",
+        port: groupDefaults?.port ? undefined : 22,
+        username: groupDefaults?.username ? "" : "root",
         protocol: "ssh",
         tags: [],
         os: "linux",
         authMethod: "password",
-        charset: "UTF-8",
+        charset: groupDefaults?.charset ? undefined : "UTF-8",
         distroMode: "auto",
         createdAt: Date.now(),
         group: defaultGroup || undefined, // Pre-fill with current navigation group
@@ -281,12 +284,10 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   };
 
   const removeHostFromChain = (index: number) => {
-    setForm((prev) => ({
-      ...prev,
-      hostChain: {
-        hostIds: (prev.hostChain?.hostIds || []).filter((_, i) => i !== index),
-      },
-    }));
+    setForm((prev) => {
+      const ids = (prev.hostChain?.hostIds || []).filter((_, i) => i !== index);
+      return { ...prev, hostChain: ids.length > 0 ? { hostIds: ids } : undefined };
+    });
   };
 
   const clearHostChain = useCallback(() => {
@@ -312,12 +313,10 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   };
 
   const removeEnvVar = (index: number) => {
-    setForm((prev) => ({
-      ...prev,
-      environmentVariables: (prev.environmentVariables || []).filter(
-        (_, i) => i !== index,
-      ),
-    }));
+    setForm((prev) => {
+      const filtered = (prev.environmentVariables || []).filter((_, i) => i !== index);
+      return { ...prev, environmentVariables: filtered.length > 0 ? filtered : undefined };
+    });
   };
 
   const handleSubmit = () => {
@@ -362,7 +361,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
       label: finalLabel,
       group: finalGroup,
       tags: form.tags || [],
-      port: form.port || 22,
+      port: form.port ?? (groupDefaults?.port ? undefined : 22),
       // Clear password if savePassword is explicitly set to false
       password: form.savePassword === false ? undefined : form.password,
       managedSourceId: finalManagedSourceId,
@@ -624,6 +623,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
     <AsidePanel
       open={true}
       onClose={onCancel}
+      width="w-[420px]"
       title={
         initialData ? t("hostDetails.title.details") : t("hostDetails.title.new")
       }
@@ -737,7 +737,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
           </div>
         </Card>
 
-        <Card className="p-3 space-y-3 bg-card border-border/80">
+        <Card className="p-3 space-y-3 bg-card border-border/80 overflow-hidden">
           <div className="flex items-center gap-2">
             <KeyRound size={14} className="text-muted-foreground" />
             <p className="text-xs font-semibold">
@@ -750,8 +750,9 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
               <div className="ml-auto w-1/2 min-w-0 flex items-center gap-2 justify-end">
                 <Input
                   type="number"
-                  value={form.port}
-                  onChange={(e) => update("port", Number(e.target.value))}
+                  value={form.port ?? ""}
+                  onChange={(e) => update("port", e.target.value ? Number(e.target.value) : undefined)}
+                  placeholder={groupDefaults?.port ? String(groupDefaults.port) : "22"}
                   className="h-8 flex-1 min-w-0 text-center"
                 />
                 <span className="text-xs text-muted-foreground">
@@ -803,7 +804,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                 if (!hasIdentities) {
                   return (
                     <Input
-                      placeholder={t("hostDetails.username.placeholder")}
+                      placeholder={groupDefaults?.username || t("hostDetails.username.placeholder")}
                       value={form.username}
                       onChange={(e) => update("username", e.target.value)}
                       className="h-10"
@@ -822,7 +823,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                     <PopoverTrigger asChild>
                       <div className="relative">
                         <Input
-                          placeholder={t("hostDetails.username.placeholder")}
+                          placeholder={groupDefaults?.username || t("hostDetails.username.placeholder")}
                           value={form.username}
                           onChange={(e) => {
                             const next = e.target.value;
@@ -982,9 +983,9 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
             {!selectedIdentity && !form.identityFileId && form.identityFilePaths && form.identityFilePaths.length > 0 && (
               <div className="space-y-1.5">
                 {form.identityFilePaths.map((keyPath, idx) => (
-                  <div key={idx} className="flex items-center gap-2 p-2 rounded-md bg-secondary/50 border border-border/60">
+                  <div key={idx} className="flex items-center gap-2 p-2 rounded-md bg-secondary/50 border border-border/60 overflow-hidden">
                     <FileKey size={14} className="text-primary shrink-0" />
-                    <span className="text-xs flex-1 truncate font-mono" title={keyPath}>
+                    <span className="text-xs w-0 flex-1 truncate font-mono" title={keyPath}>
                       {keyPath}
                     </span>
                     <Button
@@ -1177,10 +1178,10 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
               selectedCredentialType === "localKeyFile" &&
               !form.identityFileId && (
                 <div className="space-y-1.5">
-                  <div className="flex items-center gap-1">
+                  <div className="flex items-center gap-1 min-w-0">
                     <input
                       type="text"
-                      className="flex-1 h-8 px-2 text-xs font-mono bg-background border border-border/60 rounded-md focus:outline-none focus:ring-1 focus:ring-ring"
+                      className="flex-1 min-w-0 h-8 px-2 text-xs font-mono bg-background border border-border/60 rounded-md focus:outline-none focus:ring-1 focus:ring-ring"
                       placeholder={t("hostDetails.credential.localKeyFilePlaceholder")}
                       value={newKeyFilePath}
                       onChange={(e) => setNewKeyFilePath(e.target.value)}
@@ -1261,18 +1262,20 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
               {t("hostDetails.sftp.sudo.passwordWarning")}
             </p>
           )}
-          <div className="space-y-1">
-            <div className="text-sm font-medium">
-              {t("hostDetails.sftp.encoding")}
-            </div>
-            <div className="text-xs text-muted-foreground">
-              {t("hostDetails.sftp.encoding.desc")}
+          <div className="flex items-center justify-between gap-4">
+            <div className="space-y-0.5">
+              <div className="text-sm font-medium">
+                {t("hostDetails.sftp.encoding")}
+              </div>
+              <div className="text-xs text-muted-foreground">
+                {t("hostDetails.sftp.encoding.desc")}
+              </div>
             </div>
             <Select
               value={form.sftpEncoding || "auto"}
               onValueChange={(val) => update("sftpEncoding", val as Host["sftpEncoding"])}
             >
-              <SelectTrigger className="h-8">
+              <SelectTrigger className="h-8 w-28">
                 <SelectValue placeholder={t("sftp.encoding.label")} />
               </SelectTrigger>
               <SelectContent>
@@ -1284,6 +1287,111 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
           </div>
         </Card>
 
+        {form.os === "linux" && (
+          <Card className="p-3 space-y-3 bg-card border-border/80">
+            <div className="flex items-center gap-2">
+              <img src="/distro/linux.svg" alt="Linux" className="h-3.5 w-3.5 opacity-70 dark:invert" />
+              <p className="text-xs font-semibold">{t("hostDetails.distro.title")}</p>
+            </div>
+            <p className="text-xs text-muted-foreground">{t("hostDetails.distro.desc")}</p>
+
+            <div className="grid gap-2 md:grid-cols-2">
+              <div className="space-y-1">
+                <span className="text-xs text-muted-foreground">{t("hostDetails.distro.mode")}</span>
+                <Select
+                  value={form.distroMode || "auto"}
+                  onValueChange={(val) => handleDistroModeChange(val as "auto" | "manual")}
+                >
+                  <SelectTrigger className="h-8" aria-label={t("hostDetails.distro.mode")}>
+                    <span className="truncate whitespace-nowrap pr-2 text-left">
+                      {form.distroMode === "manual"
+                        ? t("hostDetails.distro.mode.manual")
+                        : t("hostDetails.distro.mode.auto")}
+                    </span>
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="auto">{t("hostDetails.distro.mode.auto")}</SelectItem>
+                    <SelectItem value="manual">{t("hostDetails.distro.mode.manual")}</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {form.distroMode === "manual" ? (
+                <div className="space-y-1">
+                  <span className="text-xs text-muted-foreground">{t("hostDetails.distro.manualLabel")}</span>
+                  <Select
+                    value={form.manualDistro}
+                    onValueChange={(val) => update("manualDistro", val)}
+                  >
+                    <SelectTrigger className="h-8" aria-label={t("hostDetails.distro.manualLabel")}>
+                      {(() => {
+                        const selectedOption = distroOptions.find((option) => option.value === form.manualDistro);
+                        return selectedOption ? (
+                          <div className="flex min-w-0 items-center gap-2 pr-2">
+                            <div
+                              className={cn(
+                                "flex h-4 w-4 shrink-0 items-center justify-center overflow-hidden rounded-[2px]",
+                                selectedOption.bgClass,
+                              )}
+                            >
+                              {selectedOption.icon ? (
+                                <img
+                                  src={selectedOption.icon}
+                                  alt={selectedOption.label}
+                                  className="h-3 w-3 object-contain invert brightness-0"
+                                />
+                              ) : (
+                                <div className="h-2 w-2 rounded-full bg-white/70" />
+                              )}
+                            </div>
+                            <span className="truncate whitespace-nowrap">{selectedOption.label}</span>
+                          </div>
+                        ) : (
+                          <SelectValue placeholder={t("hostDetails.distro.unknown")} />
+                        );
+                      })()}
+                    </SelectTrigger>
+                    <SelectContent className="min-w-[14rem]">
+                      {distroOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          <div className="flex items-center gap-2">
+                            <div
+                              className={cn(
+                                "flex h-4 w-4 shrink-0 items-center justify-center overflow-hidden rounded-[2px]",
+                                option.bgClass,
+                              )}
+                            >
+                              {option.icon ? (
+                                <img
+                                  src={option.icon}
+                                  alt={option.label}
+                                  className="h-3 w-3 object-contain invert brightness-0"
+                                />
+                              ) : (
+                                <div className="h-2 w-2 rounded-full bg-white/70" />
+                              )}
+                            </div>
+                            <span className="whitespace-nowrap">{option.label}</span>
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              ) : (
+                <div className="space-y-1">
+                  <span className="text-xs text-muted-foreground">{t("hostDetails.distro.detectedLabel")}</span>
+                  <div className="flex h-8 items-center rounded-md border border-border/60 bg-background/50 px-3 text-sm">
+                    {effectiveFormDistro
+                      ? getDistroOptionLabel(effectiveFormDistro)
+                      : t("hostDetails.distro.unknown")}
+                  </div>
+                </div>
+              )}
+            </div>
+          </Card>
+        )}
+
         <Card className="p-3 space-y-3 bg-card border-border/80">
           <div className="flex items-center gap-2">
             <Palette size={14} className="text-muted-foreground" />
@@ -1292,113 +1400,6 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
             </p>
           </div>
 
-          {form.os === "linux" && (
-            <div className="space-y-2 rounded-lg border border-border/70 bg-secondary/30 p-3">
-              <div className="flex items-start gap-2">
-                <Globe size={14} className="mt-0.5 text-muted-foreground" />
-                <div className="space-y-0.5">
-                  <p className="text-xs font-semibold">{t("hostDetails.distro.title")}</p>
-                  <p className="text-xs text-muted-foreground">{t("hostDetails.distro.desc")}</p>
-                </div>
-              </div>
-
-              <div className="grid gap-2 md:grid-cols-2">
-                <div className="space-y-1">
-                  <span className="text-xs text-muted-foreground">{t("hostDetails.distro.mode")}</span>
-                  <Select
-                    value={form.distroMode || "auto"}
-                    onValueChange={(val) => handleDistroModeChange(val as "auto" | "manual")}
-                  >
-                    <SelectTrigger className="h-8" aria-label={t("hostDetails.distro.mode")}>
-                      <span className="truncate whitespace-nowrap pr-2 text-left">
-                        {form.distroMode === "manual"
-                          ? t("hostDetails.distro.mode.manual")
-                          : t("hostDetails.distro.mode.auto")}
-                      </span>
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="auto">{t("hostDetails.distro.mode.auto")}</SelectItem>
-                      <SelectItem value="manual">{t("hostDetails.distro.mode.manual")}</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                {form.distroMode === "manual" ? (
-                  <div className="space-y-1">
-                    <span className="text-xs text-muted-foreground">{t("hostDetails.distro.manualLabel")}</span>
-                    <Select
-                      value={form.manualDistro}
-                      onValueChange={(val) => update("manualDistro", val)}
-                    >
-                      <SelectTrigger className="h-8" aria-label={t("hostDetails.distro.manualLabel")}>
-                        {(() => {
-                          const selectedOption = distroOptions.find((option) => option.value === form.manualDistro);
-                          return selectedOption ? (
-                            <div className="flex min-w-0 items-center gap-2 pr-2">
-                              <div
-                                className={cn(
-                                  "flex h-4 w-4 shrink-0 items-center justify-center overflow-hidden rounded-[2px]",
-                                  selectedOption.bgClass,
-                                )}
-                              >
-                                {selectedOption.icon ? (
-                                  <img
-                                    src={selectedOption.icon}
-                                    alt={selectedOption.label}
-                                    className="h-3 w-3 object-contain invert brightness-0"
-                                  />
-                                ) : (
-                                  <div className="h-2 w-2 rounded-full bg-white/70" />
-                                )}
-                              </div>
-                              <span className="truncate whitespace-nowrap">{selectedOption.label}</span>
-                            </div>
-                          ) : (
-                            <SelectValue placeholder={t("hostDetails.distro.unknown")} />
-                          );
-                        })()}
-                      </SelectTrigger>
-                      <SelectContent className="min-w-[14rem]">
-                        {distroOptions.map((option) => (
-                          <SelectItem key={option.value} value={option.value}>
-                            <div className="flex items-center gap-2">
-                              <div
-                                className={cn(
-                                  "flex h-4 w-4 shrink-0 items-center justify-center overflow-hidden rounded-[2px]",
-                                  option.bgClass,
-                                )}
-                              >
-                                {option.icon ? (
-                                  <img
-                                    src={option.icon}
-                                    alt={option.label}
-                                    className="h-3 w-3 object-contain invert brightness-0"
-                                  />
-                                ) : (
-                                  <div className="h-2 w-2 rounded-full bg-white/70" />
-                                )}
-                              </div>
-                              <span className="whitespace-nowrap">{option.label}</span>
-                            </div>
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                ) : (
-                  <div className="space-y-1">
-                    <span className="text-xs text-muted-foreground">{t("hostDetails.distro.detectedLabel")}</span>
-                    <div className="flex h-8 items-center rounded-md border border-border/60 bg-background/50 px-3 text-sm">
-                      {effectiveFormDistro
-                        ? getDistroOptionLabel(effectiveFormDistro)
-                        : t("hostDetails.distro.unknown")}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-
           {/* SSH Theme Selection */}
           <button
             type="button"
@@ -1515,7 +1516,15 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
           <ToggleRow
             label="Mosh"
             enabled={!!form.moshEnabled}
-            onToggle={() => update("moshEnabled", !form.moshEnabled)}
+            onToggle={() => {
+              const enabling = !form.moshEnabled;
+              if (enabling && form.deviceType === 'network') {
+                // Network device mode is incompatible with Mosh — clear it
+                setForm(prev => ({ ...prev, moshEnabled: true, deviceType: undefined }));
+              } else {
+                update("moshEnabled", enabling);
+              }
+            }}
           />
         </Card>
 
@@ -1548,6 +1557,32 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
           )}
         </Card>
 
+        {/* Network Device Mode — only for SSH hosts without Mosh (serial already uses raw mode) */}
+        {(!form.protocol || form.protocol === 'ssh') && !form.moshEnabled && (
+        <Card className="p-3 space-y-2 bg-card border-border/80">
+          <div className="flex items-center gap-2">
+            <Router size={14} className="text-muted-foreground" />
+            <p className="text-xs font-semibold">{t("hostDetails.section.deviceType")}</p>
+          </div>
+          <ToggleRow
+            label={t("hostDetails.deviceType")}
+            enabled={form.deviceType === 'network'}
+            onToggle={() => update("deviceType", form.deviceType === 'network' ? undefined : 'network')}
+          />
+          <p className="text-xs text-muted-foreground break-words">
+            {t("hostDetails.deviceType.desc")}
+          </p>
+          {form.deviceType === 'network' && (
+            <div className="flex items-start gap-2 p-2 rounded-md bg-yellow-500/10 border border-yellow-500/20">
+              <AlertTriangle size={14} className="text-yellow-500 mt-0.5 flex-shrink-0" />
+              <p className="text-xs text-yellow-600 dark:text-yellow-400 break-words">
+                {t("hostDetails.deviceType.warning")}
+              </p>
+            </div>
+          )}
+        </Card>
+        )}
+
         {/* Legacy Algorithms */}
         <Card className="p-3 space-y-2 bg-card border-border/80">
           <div className="flex items-center gap-2">
@@ -1719,7 +1754,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
                 className="text-muted-foreground hover:text-destructive flex-shrink-0 ml-auto"
                 onClick={(e) => {
                   e.stopPropagation();
-                  setForm((prev) => ({ ...prev, environmentVariables: [] }));
+                  setForm((prev) => ({ ...prev, environmentVariables: undefined }));
                 }}
               />
             </button>
@@ -1742,7 +1777,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
             <p className="text-xs font-semibold">{t("hostDetails.startupCommand")}</p>
           </div>
           <Textarea
-            placeholder={t("hostDetails.startupCommand.placeholder")}
+            placeholder={groupDefaults?.startupCommand || t("hostDetails.startupCommand.placeholder")}
             value={form.startupCommand || ""}
             onChange={(e) => update("startupCommand", e.target.value)}
             className="min-h-[80px] font-mono text-sm"
@@ -1806,7 +1841,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
 
             {/* Telnet Charset */}
             <Input
-              placeholder={t("hostDetails.charset.placeholder")}
+              placeholder={groupDefaults?.charset || t("hostDetails.charset.placeholder")}
               value={form.charset || "UTF-8"}
               onChange={(e) => update("charset", e.target.value)}
               className="h-10"

components/HostTreeView.tsx

@@ -1,4 +1,4 @@
-import { CheckSquare, ChevronRight, FileSymlink, Folder, FolderOpen, Monitor, Server, Square, Expand, Minimize2 } from 'lucide-react';
+import { CheckSquare, ChevronRight, Edit2, FileSymlink, Folder, FolderOpen, Monitor, Server, Square, Expand, Minimize2 } from 'lucide-react';
 import React, { useMemo } from 'react';
 import { useI18n } from '../application/i18n/I18nProvider';
 import { useTreeExpandedState } from '../application/state/useTreeExpandedState';
@@ -32,6 +32,7 @@ interface HostTreeViewProps {
   moveGroup: (sourcePath: string, targetPath: string) => void;
   managedGroupPaths?: Set<string>;
   onUnmanageGroup?: (groupPath: string) => void;
+
   isMultiSelectMode?: boolean;
   selectedHostIds?: Set<string>;
   toggleHostSelection?: (hostId: string) => void;
@@ -56,6 +57,7 @@ interface TreeNodeProps {
   moveGroup: (sourcePath: string, targetPath: string) => void;
   managedGroupPaths?: Set<string>;
   onUnmanageGroup?: (groupPath: string) => void;
+
   isMultiSelectMode?: boolean;
   selectedHostIds?: Set<string>;
   toggleHostSelection?: (hostId: string) => void;
@@ -81,6 +83,7 @@ const TreeNode: React.FC<TreeNodeProps> = ({
   moveGroup,
   managedGroupPaths,
   onUnmanageGroup,
+
   isMultiSelectMode,
   selectedHostIds,
   toggleHostSelection,
@@ -176,6 +179,15 @@ const TreeNode: React.FC<TreeNodeProps> = ({
                     {hostsCountInNode}
                   </span>
                 )}
+                <button
+                  className="h-7 w-7 flex items-center justify-center rounded-md hover:bg-secondary/80 transition-colors opacity-0 group-hover:opacity-100 shrink-0"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEditGroup(node.path);
+                  }}
+                >
+                  <Edit2 size={13} />
+                </button>
               </div>
             </CollapsibleTrigger>
           </ContextMenuTrigger>
@@ -226,6 +238,7 @@ const TreeNode: React.FC<TreeNodeProps> = ({
               moveGroup={moveGroup}
               managedGroupPaths={managedGroupPaths}
               onUnmanageGroup={onUnmanageGroup}
+
               isMultiSelectMode={isMultiSelectMode}
               selectedHostIds={selectedHostIds}
               toggleHostSelection={toggleHostSelection}
@@ -244,6 +257,7 @@ const TreeNode: React.FC<TreeNodeProps> = ({
               onDeleteHost={onDeleteHost}
               onCopyCredentials={onCopyCredentials}
               moveHostToGroup={moveHostToGroup}
+
               isMultiSelectMode={isMultiSelectMode}
               selectedHostIds={selectedHostIds}
               toggleHostSelection={toggleHostSelection}
@@ -264,6 +278,7 @@ interface HostTreeItemProps {
   onDeleteHost: (host: Host) => void;
   onCopyCredentials: (host: Host) => void;
   moveHostToGroup: (hostId: string, groupPath: string | null) => void;
+
   isMultiSelectMode?: boolean;
   selectedHostIds?: Set<string>;
   toggleHostSelection?: (hostId: string) => void;
@@ -278,6 +293,7 @@ const HostTreeItem: React.FC<HostTreeItemProps> = ({
   onDeleteHost,
   onCopyCredentials,
   moveHostToGroup: _moveHostToGroup,
+
   isMultiSelectMode,
   selectedHostIds,
   toggleHostSelection,
@@ -348,6 +364,15 @@ const HostTreeItem: React.FC<HostTreeItemProps> = ({
                 {tags.length > 2 && '...'}
               </span>
             )}
+            <button
+              className="h-7 w-7 flex items-center justify-center rounded-md hover:bg-secondary/80 transition-colors"
+              onClick={(e) => {
+                e.stopPropagation();
+                onEditHost(host);
+              }}
+            >
+              <Edit2 size={13} />
+            </button>
           </div>
         </div>
       </ContextMenuTrigger>
@@ -364,7 +389,7 @@ const HostTreeItem: React.FC<HostTreeItemProps> = ({
         <ContextMenuItem onClick={() => onCopyCredentials(host)}>
           <Server className="mr-2 h-4 w-4" /> {t("vault.hosts.copyCredentials")}
         </ContextMenuItem>
-        <ContextMenuItem 
+        <ContextMenuItem
           onClick={() => onDeleteHost(host)}
           className="text-destructive focus:text-destructive"
         >
@@ -396,6 +421,7 @@ export const HostTreeView: React.FC<HostTreeViewProps> = ({
   moveGroup,
   managedGroupPaths,
   onUnmanageGroup,
+
   isMultiSelectMode,
   selectedHostIds,
   toggleHostSelection,

components/PortForwardingNew.tsx

@@ -14,12 +14,14 @@ import React, { useCallback, useState } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { usePortForwardingState } from "../application/state/usePortForwardingState";
 import {
+  GroupConfig,
   Host,
   ManagedSource,
   PortForwardingRule,
   PortForwardingType,
   SSHKey,
 } from "../domain/models";
+import { resolveGroupDefaults, applyGroupDefaults } from "../domain/groupConfig";
 import { cn } from "../lib/utils";
 import SelectHostPanel from "./SelectHostPanel";
 import {
@@ -66,6 +68,7 @@ interface PortForwardingProps {
   identities?: import('../domain/models').Identity[];
   customGroups: string[];
   managedSources?: ManagedSource[];
+  groupConfigs?: GroupConfig[];
   onNewHost?: () => void;
   onSaveHost?: (host: Host) => void;
   onCreateGroup?: (groupPath: string) => void;
@@ -77,6 +80,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
   identities = [],
   customGroups: _customGroups,
   managedSources = [],
+  groupConfigs = [],
   onNewHost: _onNewHost,
   onSaveHost,
   onCreateGroup: _onCreateGroup,
@@ -113,8 +117,8 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
   // Start a port forwarding tunnel
   const handleStartTunnel = useCallback(
     async (rule: PortForwardingRule) => {
-      const _host = hosts.find((h) => h.id === rule.hostId);
-      if (!_host) {
+      const _rawHost = hosts.find((h) => h.id === rule.hostId);
+      if (!_rawHost) {
         setRuleStatus(rule.id, "error", t("pf.error.hostNotFound"));
         toast.error(
           t("pf.error.hostNotFound"),
@@ -123,6 +127,10 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
         return;
       }
 
+      const _host = _rawHost.group
+        ? applyGroupDefaults(_rawHost, resolveGroupDefaults(_rawHost.group, groupConfigs))
+        : _rawHost;
+
       setPendingOperations((prev) => new Set([...prev, rule.id]));
       let errorShown = false;
 
@@ -161,7 +169,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
         });
       }
     },
-    [hosts, identities, keys, setRuleStatus, startTunnel, t],
+    [hosts, identities, keys, groupConfigs, setRuleStatus, startTunnel, t],
   );
 
   // Stop a port forwarding tunnel

components/QuickSwitcher.tsx

@@ -98,13 +98,17 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
 
   // Reset state when opening
   useEffect(() => {
-    if (isOpen) {
-      setSelectedIndex(0);
-      // Auto focus the input after a short delay
-      setTimeout(() => {
-        inputRef.current?.focus();
-      }, 50);
-    }
+    if (!isOpen) return;
+
+    const focusTimer = window.setTimeout(() => {
+      inputRef.current?.focus();
+    }, 50);
+
+    setSelectedIndex(0);
+
+    return () => {
+      window.clearTimeout(focusTimer);
+    };
   }, [isOpen]);
 
   // Handle clicks outside the container

components/SelectHostPanel.tsx

@@ -19,6 +19,12 @@ import { Input } from "./ui/input";
 import { ScrollArea } from "./ui/scroll-area";
 import { SortDropdown, SortMode } from "./ui/sort-dropdown";
 import { TagFilterDropdown } from "./ui/tag-filter-dropdown";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./ui/tooltip";
 
 interface SelectHostPanelProps {
   hosts: Host[];
@@ -198,6 +204,7 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
   }, [currentPath]);
 
   return (
+    <TooltipProvider delayDuration={300}>
     <div
       className={cn(
         "absolute right-0 top-0 bottom-0 w-[380px] border-l border-border/60 bg-background z-40 flex flex-col app-no-drag",
@@ -271,7 +278,7 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
 
       {/* Content */}
       <ScrollArea className="flex-1">
-        <div className="p-4 space-y-4">
+        <div className="p-3 space-y-3">
           {/* Breadcrumbs */}
           {currentPath && (
             <div className="flex items-center gap-1 text-xs text-muted-foreground">
@@ -301,20 +308,20 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
           )}
           {groupsWithCounts.length > 0 && (
             <div>
-              <h4 className="text-sm font-semibold mb-3">{t("vault.groups.title")}</h4>
+              <h4 className="text-xs font-semibold mb-2 text-muted-foreground">{t("vault.groups.title")}</h4>
               <div className="space-y-1">
                 {groupsWithCounts.map((group) => (
                   <div
                     key={group.path}
-                    className="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-muted/70 cursor-pointer transition-colors"
+                    className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg hover:bg-muted/70 cursor-pointer transition-colors"
                     onClick={() => setCurrentPath(group.path)}
                   >
-                    <div className="h-10 w-10 rounded-lg bg-primary/15 text-primary flex items-center justify-center">
-                      <LayoutGrid size={18} />
+                    <div className="h-8 w-8 rounded-lg bg-primary/15 text-primary flex items-center justify-center shrink-0">
+                      <LayoutGrid size={15} />
                     </div>
                     <div className="flex-1 min-w-0">
-                      <div className="font-medium">{group.name}</div>
-                      <div className="text-xs text-muted-foreground">
+                      <div className="text-[13px] font-medium truncate">{group.name}</div>
+                      <div className="text-[11px] text-muted-foreground">
                         {t("vault.groups.hostsCount", { count: group.count })}
                       </div>
                     </div>
@@ -327,18 +334,19 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
           {/* Hosts Section */}
           {filteredHosts.length > 0 && (
             <div>
-              <h4 className="text-sm font-semibold mb-3">{t("vault.nav.hosts")}</h4>
+              <h4 className="text-xs font-semibold mb-2 text-muted-foreground">{t("vault.nav.hosts")}</h4>
               <div className="space-y-1">
                 {filteredHosts.map((host) => {
                   const isSelected = selectedHostIds.includes(host.id);
+                  const connectionStr = `${host.username}@${host.hostname}:${host.port || 22}`;
 
                   return (
                     <div
                       key={host.id}
                       className={cn(
-                        "flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-colors",
+                        "flex items-center gap-2.5 px-2.5 py-2 rounded-lg cursor-pointer transition-colors",
                         isSelected
-                          ? "bg-muted border border-border"
+                          ? "bg-muted"
                           : "hover:bg-muted/70",
                       )}
                       onClick={() => onSelect(host)}
@@ -346,16 +354,32 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
                       <DistroAvatar
                         host={host}
                         fallback={host.os[0].toUpperCase()}
-                        className="h-10 w-10"
+                        className="h-8 w-8 rounded-md"
                       />
                       <div className="flex-1 min-w-0">
-                        <div className="font-medium">{host.label}</div>
-                        <div className="text-xs text-muted-foreground truncate">
-                          {host.username}@{host.hostname}:{host.port || 22}
-                        </div>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <div className="text-[13px] font-medium truncate">
+                              {host.label}
+                            </div>
+                          </TooltipTrigger>
+                          <TooltipContent side="top" align="start">
+                            <p>{host.label}</p>
+                          </TooltipContent>
+                        </Tooltip>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <div className="text-[11px] text-muted-foreground truncate">
+                              {connectionStr}
+                            </div>
+                          </TooltipTrigger>
+                          <TooltipContent side="top" align="start">
+                            <p>{connectionStr}</p>
+                          </TooltipContent>
+                        </Tooltip>
                       </div>
                       {isSelected && (
-                        <Check size={16} className="text-primary" />
+                        <Check size={14} className="text-primary shrink-0" />
                       )}
                     </div>
                   );
@@ -413,6 +437,7 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
         />
       )}
     </div>
+    </TooltipProvider>
   );
 };
 

components/SerialConnectModal.tsx

@@ -35,7 +35,7 @@ interface SerialPort {
 interface SerialConnectModalProps {
   open: boolean;
   onClose: () => void;
-  onConnect: (config: SerialConfig) => void;
+  onConnect: (config: SerialConfig, options?: { charset?: string }) => void;
   onSaveHost?: (host: Host) => void;
 }
 
@@ -65,6 +65,7 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
   const [flowControl, setFlowControl] = useState<SerialFlowControl>('none');
   const [localEcho, setLocalEcho] = useState(false);
   const [lineMode, setLineMode] = useState(false);
+  const [charset, setCharset] = useState('UTF-8');
 
   // Save configuration state
   const [saveConfig, setSaveConfig] = useState(false);
@@ -131,12 +132,13 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
         tags: ['serial'],
         protocol: 'serial',
         createdAt: Date.now(),
+        charset,
         serialConfig: config, // Store full serial configuration for connection
       };
       onSaveHost(host);
     }
 
-    onConnect(config);
+    onConnect(config, { charset });
     onClose();
   };
 
@@ -164,7 +166,7 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
 
   return (
     <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
-      <DialogContent className="max-w-md">
+      <DialogContent className="max-w-md max-h-[85vh] flex flex-col">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Usb size={18} />
@@ -175,7 +177,7 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-4 py-2">
+        <div className="space-y-4 py-2 overflow-y-auto flex-1 min-h-0">
           {/* Serial Port Selection */}
           <div className="space-y-2">
             <div className="flex items-center justify-between">
@@ -368,6 +370,20 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
                     className="h-4 w-4 rounded border-input"
                   />
                 </div>
+
+                {/* Charset */}
+                <div className="space-y-1">
+                  <Label htmlFor="serial-charset" className="text-sm font-medium">
+                    {t('serial.field.charset')}
+                  </Label>
+                  <Input
+                    id="serial-charset"
+                    placeholder={t("hostDetails.charset.placeholder")}
+                    value={charset}
+                    onChange={(e) => setCharset(e.target.value)}
+                    className="h-9"
+                  />
+                </div>
               </div>
             </CollapsibleContent>
           </Collapsible>

components/SerialHostDetailsPanel.tsx

@@ -66,6 +66,7 @@ export const SerialHostDetailsPanel: React.FC<SerialHostDetailsPanelProps> = ({
   const [flowControl, setFlowControl] = useState<SerialFlowControl>(initialData.serialConfig?.flowControl || 'none');
   const [localEcho, setLocalEcho] = useState(initialData.serialConfig?.localEcho || false);
   const [lineMode, setLineMode] = useState(initialData.serialConfig?.lineMode || false);
+  const [charset, setCharset] = useState(initialData.charset || 'UTF-8');
   const [tags, setTags] = useState<string[]>(initialData.tags || []);
   const [group, setGroup] = useState(initialData.group || '');
 
@@ -107,6 +108,7 @@ export const SerialHostDetailsPanel: React.FC<SerialHostDetailsPanelProps> = ({
       port: baudRate,
       tags,
       group,
+      charset,
       serialConfig: config,
     };
 
@@ -392,6 +394,20 @@ export const SerialHostDetailsPanel: React.FC<SerialHostDetailsPanelProps> = ({
                   className="h-4 w-4 rounded border-input"
                 />
               </div>
+
+              {/* Charset */}
+              <div className="space-y-1">
+                <Label htmlFor="serial-charset" className="text-sm font-medium">
+                  {t('serial.field.charset')}
+                </Label>
+                <Input
+                  id="serial-charset"
+                  placeholder={t("hostDetails.charset.placeholder")}
+                  value={charset}
+                  onChange={(e) => setCharset(e.target.value)}
+                  className="h-9"
+                />
+              </div>
             </div>
           </CollapsibleContent>
         </Collapsible>

components/SettingsPage.tsx

@@ -63,6 +63,8 @@ const SettingsTerminalTabContainer: React.FC<{ settings: SettingsState }> = ({ s
             terminalSettings={settings.terminalSettings}
             updateTerminalSetting={settings.updateTerminalSetting}
             availableFonts={availableFonts}
+            workspaceFocusStyle={settings.workspaceFocusStyle}
+            setWorkspaceFocusStyle={settings.setWorkspaceFocusStyle}
         />
     );
 };
@@ -111,6 +113,7 @@ const SettingsSyncTabWithVault: React.FC<{ onSettingsApplied?: () => void }> = (
         customGroups,
         snippetPackages,
         knownHosts,
+        groupConfigs,
         importDataFromString,
         clearVaultData,
     } = useVaultState();
@@ -130,8 +133,8 @@ const SettingsSyncTabWithVault: React.FC<{ onSettingsApplied?: () => void }> = (
     );
 
     const vault = useMemo(
-        () => ({ hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts }),
-        [hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts],
+        () => ({ hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts, groupConfigs }),
+        [hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts, groupConfigs],
     );
 
     return (
@@ -152,10 +155,6 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
     const { updateState, checkNow, installUpdate, openReleasePage, startDownload, isUpdateDemoMode } = 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();
@@ -283,8 +282,6 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                             setUiLanguage={settings.setUiLanguage}
                             customCSS={settings.customCSS}
                             setCustomCSS={settings.setCustomCSS}
-                            isImmersive={isImmersive}
-                            onToggleImmersive={toggleImmersive}
                         />
                     )}
 

components/SftpSidePanel.tsx

@@ -10,7 +10,7 @@
  * Used in TerminalLayer to provide SFTP alongside terminal sessions.
  */
 
-import React, { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { formatHostPort } from "../domain/host";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { useSftpState } from "../application/state/useSftpState";
@@ -31,12 +31,17 @@ import { SftpTransferQueue } from "./sftp/SftpTransferQueue";
 import { SftpContextProvider } from "./sftp";
 import { useSftpViewPaneCallbacks } from "./sftp/hooks/useSftpViewPaneCallbacks";
 import { useSftpViewTabs } from "./sftp/hooks/useSftpViewTabs";
+import { useSftpKeyboardShortcuts } from "./sftp/hooks/useSftpKeyboardShortcuts";
+import { sftpFocusStore } from "./sftp/hooks/useSftpFocusedPane";
+import { keepOnlyPaneSelections } from "./sftp/hooks/selectionScope";
+import { KeyBinding, HotkeyScheme } from "../domain/models";
 
 interface SftpSidePanelProps {
   hosts: Host[];
   keys: SSHKey[];
   identities: Identity[];
   updateHosts: (hosts: Host[]) => void;
+  sftpDefaultViewMode: "list" | "tree";
   /** The host to connect to (follows focused terminal) */
   activeHost: Host | null;
   initialLocation?: { hostId: string; path: string } | null;
@@ -55,6 +60,8 @@ interface SftpSidePanelProps {
   sftpAutoSync: boolean;
   sftpShowHiddenFiles: boolean;
   sftpUseCompressedUpload: boolean;
+  hotkeyScheme: HotkeyScheme;
+  keyBindings: KeyBinding[];
   editorWordWrap: boolean;
   setEditorWordWrap: (value: boolean) => void;
   onGetTerminalCwd?: () => Promise<string | null>;
@@ -65,6 +72,7 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
   keys,
   identities,
   updateHosts,
+  sftpDefaultViewMode,
   activeHost,
   initialLocation,
   showWorkspaceHostHeader = false,
@@ -76,6 +84,8 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
   sftpAutoSync,
   sftpShowHiddenFiles,
   sftpUseCompressedUpload,
+  hotkeyScheme,
+  keyBindings,
   editorWordWrap,
   setEditorWordWrap,
   onGetTerminalCwd,
@@ -109,6 +119,7 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
     listSftp,
     mkdirLocal,
     deleteLocalFile,
+    listLocalDir,
   } = useSftpBackend();
 
   const sftpRef = useRef(sftp);
@@ -119,6 +130,17 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
 
   const autoSyncRef = useRef(sftpAutoSync);
   autoSyncRef.current = sftpAutoSync;
+  const panelRootRef = useRef<HTMLDivElement>(null);
+  const dialogActionScopeIdRef = useRef(`sftp-side-panel:${crypto.randomUUID()}`);
+  const [hasPaneFocus, setHasPaneFocus] = useState(false);
+
+  useSftpKeyboardShortcuts({
+    keyBindings,
+    hotkeyScheme,
+    sftpRef,
+    dialogActionScopeId: dialogActionScopeIdRef.current,
+    isActive: isVisible && hasPaneFocus,
+  });
 
   const { getOpenerForFile, setOpenerForExtension } = useSftpFileAssociations();
   const getOpenerForFileRef = useRef(getOpenerForFile);
@@ -130,10 +152,60 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
     sftpRef.current.setShowHiddenFiles("left", paneId, !pane.showHiddenFiles);
   }, []);
 
+  const syncFocusedSelection = useCallback((tabId: string | null) => {
+    if (tabId) {
+      keepOnlyPaneSelections(sftpRef.current, { side: "left", tabId });
+      return;
+    }
+    keepOnlyPaneSelections(sftpRef.current, null);
+  }, []);
+
+  const handlePaneFocus = useCallback(() => {
+    sftpFocusStore.setFocusedSide("left");
+    setHasPaneFocus(true);
+    syncFocusedSelection(sftpRef.current.getActiveTabId("left"));
+  }, [syncFocusedSelection]);
+
   // NOTE: We intentionally do NOT sync to activeTabStore here.
   // activeTabStore is a global singleton shared with SftpView.
   // Writing to it here would corrupt SftpView's left pane visibility.
 
+  useEffect(() => {
+    if (!isVisible) {
+      setHasPaneFocus(false);
+      syncFocusedSelection(null);
+    }
+  }, [isVisible, syncFocusedSelection]);
+
+  useEffect(() => {
+    if (!isVisible) return;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target as Node | null;
+      const elementTarget = target instanceof Element ? target : null;
+      const isPortalInteraction = !!elementTarget?.closest(
+        '#netcatty-context-menu-root, [role="dialog"], [data-radix-popper-content-wrapper]',
+      );
+      if (isPortalInteraction) {
+        return;
+      }
+
+      if (panelRootRef.current?.contains(target)) {
+        sftpFocusStore.setFocusedSide("left");
+        setHasPaneFocus(true);
+        syncFocusedSelection(sftpRef.current.getActiveTabId("left"));
+      } else {
+        setHasPaneFocus(false);
+        syncFocusedSelection(null);
+      }
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+    };
+  }, [isVisible, syncFocusedSelection]);
+
   const {
     leftCallbacks,
     rightCallbacks,
@@ -168,6 +240,7 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
     selectDirectory,
     startStreamTransfer,
     getSftpIdForConnection: sftp.getSftpIdForConnection,
+    listLocalFiles: listLocalDir,
   });
 
   const {
@@ -432,6 +505,7 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
     // Filter transfers to those relevant to the active connection's host,
     // so workspace focus switches don't show transfers from other hosts.
     const filtered = sftp.transfers.filter((t) => {
+      if (t.parentTaskId) return false; // Child tasks rendered by SftpTransferQueue
       if (connection.isLocal) {
         return t.sourceConnectionId === connection.id || t.targetConnectionId === connection.id;
       }
@@ -504,9 +578,11 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
       rightCallbacks={rightCallbacks}
     >
       <div
+        ref={panelRootRef}
         className="h-full flex flex-col bg-background overflow-hidden"
         style={isVisible ? undefined : { display: "none" }}
         aria-hidden={!isVisible}
+        onClick={handlePaneFocus}
       >
         {showWorkspaceHostHeader && displayHost && (
           <div className="shrink-0 border-b border-border/50 bg-muted/20 px-3 py-1.5">
@@ -546,8 +622,12 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
                 <SftpPaneView
                   side="left"
                   pane={pane}
+                  dialogActionScopeId={dialogActionScopeIdRef.current}
+                  isPaneFocused={isVisible && hasPaneFocus}
+                  sftpDefaultViewMode={sftpDefaultViewMode}
                   showHeader
                   showEmptyHeader
+                  forceActive
                   onToggleShowHiddenFiles={() => handleToggleHiddenFiles(pane.id)}
                   onGoToTerminalCwd={onGetTerminalCwd ? handleGoToTerminalCwd : undefined}
                 />
@@ -558,6 +638,7 @@ const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
         <SftpTransferQueue
           sftp={sftp}
           visibleTransfers={visibleTransfers}
+          allTransfers={sftp.transfers}
           canRevealTransferTarget={canRevealTransferTarget}
           onRevealTransferTarget={handleRevealTransferTarget}
         />
@@ -608,6 +689,7 @@ const sidePanelAreEqual = (prev: SftpSidePanelProps, next: SftpSidePanelProps):
   prev.keys === next.keys &&
   prev.identities === next.identities &&
   prev.updateHosts === next.updateHosts &&
+  prev.sftpDefaultViewMode === next.sftpDefaultViewMode &&
   prev.activeHost === next.activeHost &&
   prev.showWorkspaceHostHeader === next.showWorkspaceHostHeader &&
   prev.isVisible === next.isVisible &&

components/SftpView.tsx

@@ -25,6 +25,7 @@ import { useRenderTracker } from "../lib/useRenderTracker";
 import { cn } from "../lib/utils";
 import { useInstantThemeSwitch } from "../lib/useInstantThemeSwitch";
 import { Host, Identity, SSHKey } from "../types";
+import { resolveGroupDefaults, applyGroupDefaults } from "../domain/groupConfig";
 import { useSftpFileAssociations } from "../application/state/useSftpFileAssociations";
 import { toast } from "./ui/toast";
 
@@ -40,6 +41,8 @@ import { useSftpViewPaneCallbacks } from "./sftp/hooks/useSftpViewPaneCallbacks"
 import { useSftpViewTabs } from "./sftp/hooks/useSftpViewTabs";
 import { useSftpKeyboardShortcuts } from "./sftp/hooks/useSftpKeyboardShortcuts";
 import { sftpFocusStore, SftpFocusedSide, useSftpFocusedSide } from "./sftp/hooks/useSftpFocusedPane";
+import { keepOnlyActivePaneSelections, keepOnlyPaneSelections } from "./sftp/hooks/selectionScope";
+
 
 // Wrapper component that subscribes to activeTabId for CSS visibility
 // This isolates the activeTabId subscription - only this component re-renders on tab switch
@@ -49,7 +52,9 @@ interface SftpViewProps {
   hosts: Host[];
   keys: SSHKey[];
   identities: Identity[];
+  groupConfigs?: import('../domain/models').GroupConfig[];
   updateHosts: (hosts: Host[]) => void;
+  sftpDefaultViewMode: "list" | "tree";
   sftpDoubleClickBehavior: "open" | "transfer";
   sftpAutoSync: boolean;
   sftpShowHiddenFiles: boolean;
@@ -64,7 +69,9 @@ const SftpViewInner: React.FC<SftpViewProps> = ({
   hosts,
   keys,
   identities,
+  groupConfigs = [],
   updateHosts,
+  sftpDefaultViewMode,
   sftpDoubleClickBehavior,
   sftpAutoSync,
   sftpShowHiddenFiles,
@@ -77,6 +84,7 @@ const SftpViewInner: React.FC<SftpViewProps> = ({
   const { t } = useI18n();
   const isActive = useIsSftpActive();
   const rootRef = useRef<HTMLDivElement>(null);
+  const dialogActionScopeIdRef = useRef("sftp-main-view");
 
   useInstantThemeSwitch(rootRef);
 
@@ -99,7 +107,17 @@ const SftpViewInner: React.FC<SftpViewProps> = ({
     defaultShowHiddenFiles: sftpShowHiddenFiles,
   }), [fileWatchHandlers, sftpUseCompressedUpload, sftpShowHiddenFiles]);
 
-  const sftp = useSftpState(hosts, keys, identities, sftpOptions);
+  // Pre-resolve group defaults so SFTP connections inherit group config
+  const effectiveHosts = useMemo(() =>
+    hosts.map(h => {
+      if (!h.group) return h;
+      const defaults = resolveGroupDefaults(h.group, groupConfigs);
+      return applyGroupDefaults(h, defaults);
+    }),
+    [hosts, groupConfigs],
+  );
+
+  const sftp = useSftpState(effectiveHosts, keys, identities, sftpOptions);
 
   // Get backend helpers for file downloads and local filesystem writes.
   const {
@@ -109,6 +127,7 @@ const SftpViewInner: React.FC<SftpViewProps> = ({
     listSftp,
     mkdirLocal,
     deleteLocalFile,
+    listLocalDir,
   } = useSftpBackend();
 
   // Store sftp in a ref so callbacks can access the latest instance
@@ -129,6 +148,7 @@ const SftpViewInner: React.FC<SftpViewProps> = ({
     keyBindings,
     hotkeyScheme,
     sftpRef,
+    dialogActionScopeId: dialogActionScopeIdRef.current,
     isActive,
   });
 
@@ -136,8 +156,18 @@ const SftpViewInner: React.FC<SftpViewProps> = ({
   const focusedSide = useSftpFocusedSide();
 
   // Handle pane focus when clicking on a pane container
-  const handlePaneFocus = useCallback((side: SftpFocusedSide) => {
+  // Clear the opposite side's selection so file operations only affect the focused pane
+  const handlePaneFocus = useCallback((side: SftpFocusedSide, targetTabId?: string) => {
+    const prevSide = sftpFocusStore.getFocusedSide();
     sftpFocusStore.setFocusedSide(side);
+    if (prevSide !== side) {
+      if (targetTabId) {
+        keepOnlyPaneSelections(sftpRef.current, { side, tabId: targetTabId });
+      } else {
+        // Focus side changed — clear other panes but keep the newly focused pane intact.
+        keepOnlyActivePaneSelections(sftpRef.current, side);
+      }
+    }
   }, []);
 
   const handleToggleHiddenFiles = useCallback((side: "left" | "right", paneId: string) => {
@@ -205,10 +235,11 @@ const SftpViewInner: React.FC<SftpViewProps> = ({
     selectDirectory,
     startStreamTransfer,
     getSftpIdForConnection: sftp.getSftpIdForConnection,
+    listLocalFiles: listLocalDir,
   });
 
   const visibleTransfers = useMemo(
-    () => [...sftp.transfers].reverse().slice(0, 5),
+    () => [...sftp.transfers].filter((t) => !t.parentTaskId).reverse().slice(0, 5),
     [sftp.transfers],
   );
 
@@ -251,6 +282,26 @@ const SftpViewInner: React.FC<SftpViewProps> = ({
     handleHostSelectRight,
   } = useSftpViewTabs({ sftp, sftpRef });
 
+  const handleAddTabLeftWithFocus = useCallback(() => {
+    const tabId = handleAddTabLeft();
+    handlePaneFocus("left", tabId);
+  }, [handleAddTabLeft, handlePaneFocus]);
+
+  const handleAddTabRightWithFocus = useCallback(() => {
+    const tabId = handleAddTabRight();
+    handlePaneFocus("right", tabId);
+  }, [handleAddTabRight, handlePaneFocus]);
+
+  const handleSelectTabLeftWithFocus = useCallback((tabId: string) => {
+    handleSelectTabLeft(tabId);
+    handlePaneFocus("left", tabId);
+  }, [handlePaneFocus, handleSelectTabLeft]);
+
+  const handleSelectTabRightWithFocus = useCallback((tabId: string) => {
+    handleSelectTabRight(tabId);
+    handlePaneFocus("right", tabId);
+  }, [handlePaneFocus, handleSelectTabRight]);
+
   return (
     <SftpContextProvider
       hosts={hosts}
@@ -291,9 +342,9 @@ const SftpViewInner: React.FC<SftpViewProps> = ({
               <SftpTabBar
                 tabs={leftTabsInfo}
                 side="left"
-                onSelectTab={handleSelectTabLeft}
+                onSelectTab={handleSelectTabLeftWithFocus}
                 onCloseTab={handleCloseTabLeft}
-                onAddTab={handleAddTabLeft}
+                onAddTab={handleAddTabLeftWithFocus}
                 onReorderTabs={handleReorderTabsLeft}
                 onMoveTabToOtherSide={handleMoveTabFromRightToLeft}
               />
@@ -309,6 +360,9 @@ const SftpViewInner: React.FC<SftpViewProps> = ({
                   <SftpPaneView
                     side="left"
                     pane={pane}
+                    dialogActionScopeId={dialogActionScopeIdRef.current}
+                    isPaneFocused={focusedSide === "left"}
+                    sftpDefaultViewMode={sftpDefaultViewMode}
                     showHeader
                     showEmptyHeader={false}
                     onToggleShowHiddenFiles={() => handleToggleHiddenFiles("left", pane.id)}
@@ -348,9 +402,9 @@ const SftpViewInner: React.FC<SftpViewProps> = ({
               <SftpTabBar
                 tabs={rightTabsInfo}
                 side="right"
-                onSelectTab={handleSelectTabRight}
+                onSelectTab={handleSelectTabRightWithFocus}
                 onCloseTab={handleCloseTabRight}
-                onAddTab={handleAddTabRight}
+                onAddTab={handleAddTabRightWithFocus}
                 onReorderTabs={handleReorderTabsRight}
                 onMoveTabToOtherSide={handleMoveTabFromLeftToRight}
               />
@@ -366,6 +420,9 @@ const SftpViewInner: React.FC<SftpViewProps> = ({
                   <SftpPaneView
                     side="right"
                     pane={pane}
+                    dialogActionScopeId={dialogActionScopeIdRef.current}
+                    isPaneFocused={focusedSide === "right"}
+                    sftpDefaultViewMode={sftpDefaultViewMode}
                     showHeader
                     showEmptyHeader={false}
                     onToggleShowHiddenFiles={() => handleToggleHiddenFiles("right", pane.id)}
@@ -427,6 +484,8 @@ const sftpViewAreEqual = (prev: SftpViewProps, next: SftpViewProps): boolean =>
   prev.hosts === next.hosts &&
   prev.keys === next.keys &&
   prev.identities === next.identities &&
+  prev.groupConfigs === next.groupConfigs &&
+  prev.sftpDefaultViewMode === next.sftpDefaultViewMode &&
   prev.sftpDoubleClickBehavior === next.sftpDoubleClickBehavior &&
   prev.sftpAutoSync === next.sftpAutoSync &&
   prev.sftpShowHiddenFiles === next.sftpShowHiddenFiles &&

components/Terminal.tsx

@@ -44,6 +44,8 @@ import { TerminalToolbar } from "./terminal/TerminalToolbar";
 import { TerminalComposeBar } from "./terminal/TerminalComposeBar";
 import { TerminalContextMenu } from "./terminal/TerminalContextMenu";
 import { TerminalSearchBar } from "./terminal/TerminalSearchBar";
+import { ZmodemProgressIndicator } from "./terminal/ZmodemProgressIndicator";
+import { useZmodemTransfer } from "./terminal/hooks/useZmodemTransfer";
 import { createTerminalSessionStarters, type PendingAuth } from "./terminal/runtime/createTerminalSessionStarters";
 import { createXTermRuntime, type XTermRuntime } from "./terminal/runtime/createXTermRuntime";
 import { XTERM_PERFORMANCE_CONFIG } from "../infrastructure/config/xtermPerformance";
@@ -240,6 +242,8 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const sessionRef = useRef<string | null>(null);
   const hasConnectedRef = useRef(false);
   const hasRunStartupCommandRef = useRef(false);
+  const terminalDataCapturedRef = useRef(false);
+  const onTerminalDataCaptureRef = useRef(onTerminalDataCapture);
   const commandBufferRef = useRef<string>("");
   const [hasMouseTracking, setHasMouseTracking] = useState(false);
   const mouseTrackingRef = useRef(false);
@@ -247,6 +251,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
 
   const terminalSettingsRef = useRef(terminalSettings);
   terminalSettingsRef.current = terminalSettings;
+  onTerminalDataCaptureRef.current = onTerminalDataCapture;
   const isVisibleRef = useRef(isVisible);
   isVisibleRef.current = isVisible;
   const pendingOutputScrollRef = useRef(false);
@@ -494,8 +499,30 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     refreshInterval: terminalSettings?.serverStatsRefreshInterval ?? 5,
     isSupportedOs: host.os === 'linux' || host.os === 'macos',
     isConnected: status === 'connected',
+    isVisible,
   });
 
+  const zmodem = useZmodemTransfer(sessionId);
+
+  const zmodemToastedRef = useRef(false);
+  useEffect(() => {
+    if (zmodem.active) {
+      zmodemToastedRef.current = false;
+      return;
+    }
+    if (zmodemToastedRef.current) return;
+    if (zmodem.error) {
+      zmodemToastedRef.current = true;
+      toast.error(zmodem.error, 'ZMODEM');
+    } else if (zmodem.filename) {
+      zmodemToastedRef.current = true;
+      toast.success(
+        `${zmodem.transferType === 'upload' ? 'Uploaded' : 'Downloaded'}: ${zmodem.filename}`,
+        'ZMODEM',
+      );
+    }
+  }, [zmodem.active, zmodem.error, zmodem.filename, zmodem.transferType]);
+
   useEffect(() => {
     if (!error) {
       lastToastedErrorRef.current = null;
@@ -582,6 +609,12 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     hasConnectedRef.current = next === "connected";
     onStatusChange?.(sessionId, next);
   };
+  const handleTerminalDataCaptureOnce = useCallback((capturedSessionId: string, data: string) => {
+    const captureHandler = onTerminalDataCaptureRef.current;
+    if (!captureHandler || terminalDataCapturedRef.current) return;
+    terminalDataCapturedRef.current = true;
+    captureHandler(capturedSessionId, data);
+  }, []);
 
   const cleanupSession = () => {
     disposeDataRef.current?.();
@@ -649,7 +682,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       }
     },
     onSessionExit,
-    onTerminalDataCapture,
+    onTerminalDataCapture: handleTerminalDataCaptureOnce,
     onOsDetected,
     onCommandExecuted,
     sessionLog,
@@ -658,6 +691,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
 
   useEffect(() => {
     let disposed = false;
+    terminalDataCapturedRef.current = false;
     setError(null);
     hasConnectedRef.current = false;
     pendingOutputScrollRef.current = false;
@@ -775,11 +809,11 @@ const TerminalComponent: React.FC<TerminalProps> = ({
 
     return () => {
       disposed = true;
-      if (onTerminalDataCapture && serializeAddonRef.current) {
+      if (!terminalDataCapturedRef.current && serializeAddonRef.current) {
         try {
           const terminalData = serializeAddonRef.current.serialize();
           logger.info("[Terminal] Capturing data on unmount", { sessionId, dataLength: terminalData.length });
-          onTerminalDataCapture(sessionId, terminalData);
+          handleTerminalDataCaptureOnce(sessionId, terminalData);
         } catch (err) {
           logger.warn("Failed to serialize terminal data on unmount:", err);
         }
@@ -787,7 +821,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       teardown();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps -- Effect only runs on host.id/sessionId change, internal functions are stable
-  }, [host.id, sessionId]);
+  }, [handleTerminalDataCaptureOnce, host.id, sessionId]);
 
   // Connection timeline and timeout visuals
   useEffect(() => {
@@ -1081,6 +1115,26 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     return () => clearTimeout(timer);
   }, [inWorkspace, isVisible]);
 
+  // When search bar opens/closes, re-fit terminal and maintain scroll position
+  useEffect(() => {
+    const term = termRef.current;
+    if (!term || !fitAddonRef.current) return;
+    const buffer = term.buffer.active;
+    const wasAtBottom = buffer.viewportY >= buffer.baseY;
+    const prevViewportY = buffer.viewportY;
+    const timer = setTimeout(() => {
+      safeFit({ force: true, requireVisible: true });
+      requestAnimationFrame(() => {
+        if (wasAtBottom) {
+          term.scrollToBottom();
+        } else {
+          term.scrollToLine(prevViewportY);
+        }
+      });
+    }, 0);
+    return () => clearTimeout(timer);
+  }, [isSearchOpen]);
+
   useEffect(() => {
     const shouldAutoFocus = isVisible && termRef.current && (!inWorkspace || isFocusMode);
     if (shouldAutoFocus) {
@@ -1176,6 +1230,8 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   }, [sessionId]);
 
   useEffect(() => {
+    if (!isVisible) return;
+
     let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
 
     const handler = () => {
@@ -1193,7 +1249,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       if (resizeTimeout) clearTimeout(resizeTimeout);
       window.removeEventListener("resize", handler);
     };
-  }, []);
+  }, [isVisible]);
 
   const disableBracketedPasteRef = useRef(terminalSettings?.disableBracketedPaste ?? false);
   disableBracketedPasteRef.current = terminalSettings?.disableBracketedPaste ?? false;
@@ -1343,6 +1399,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     if (!termRef.current) return;
     cleanupSession();
     auth.resetForRetry();
+    terminalDataCapturedRef.current = false;
     hasRunStartupCommandRef.current = false;
     setIsDisconnectedDialogDismissed(false);
     setStatus("connecting");
@@ -1535,7 +1592,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
         )}
         <div className="absolute left-0 right-0 top-0 z-20 pointer-events-none">
           <div
-            className="flex items-center gap-1 px-2 py-0.5 backdrop-blur-md pointer-events-auto min-w-0 border-b-[0.5px]"
+            className="flex items-center gap-1 px-2 py-0.5 backdrop-blur-md pointer-events-auto min-w-0"
             style={{
               backgroundColor: 'var(--terminal-ui-bg)',
               color: 'var(--terminal-ui-fg)',
@@ -1949,6 +2006,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
                 containerRef={containerRef}
                 onRequestReposition={autocomplete.repositionPopup}
                 searchBarOffset={isSearchOpen ? 64 : 30}
+                onDismiss={autocompleteClosePopup}
               />,
               document.body,
             )
@@ -2033,6 +2091,22 @@ const TerminalComponent: React.FC<TerminalProps> = ({
                 }}
               />
             )}
+
+          {/* ZMODEM transfer progress indicator */}
+          {zmodem.active && (
+            <div className="absolute bottom-4 right-4 z-[25] pointer-events-auto">
+              <ZmodemProgressIndicator
+                transferType={zmodem.transferType}
+                filename={zmodem.filename}
+                transferred={zmodem.transferred}
+                total={zmodem.total}
+                fileIndex={zmodem.fileIndex}
+                fileCount={zmodem.fileCount}
+                finalizing={zmodem.finalizing}
+                onCancel={zmodem.cancel}
+              />
+            </div>
+          )}
         </div>
 
         {/* Compose Bar (solo sessions only; workspace uses TerminalLayer's global bar) */}

components/TerminalLayer.tsx

@@ -29,7 +29,8 @@ import { useStoredNumber } from '../application/state/useStoredNumber';
 import { STORAGE_KEY_SIDE_PANEL_WIDTH } from '../infrastructure/config/storageKeys';
 import { buildCacheKey } from '../application/state/sftp/sharedRemoteHostCache';
 import type { DropEntry } from '../lib/sftpFileUtils';
-import { Host, Identity, KnownHost, SSHKey, Snippet, TerminalSession, TerminalTheme, Workspace, WorkspaceNode } from '../types';
+import { GroupConfig, Host, Identity, KnownHost, SSHKey, Snippet, TerminalSession, TerminalTheme, Workspace, WorkspaceNode } from '../types';
+import { resolveGroupDefaults, applyGroupDefaults } from '../domain/groupConfig';
 import { DistroAvatar } from './DistroAvatar';
 import Terminal from './Terminal';
 import { SftpSidePanel } from './SftpSidePanel';
@@ -204,6 +205,7 @@ type AITerminalSessionInfo = {
   username?: string;
   protocol?: string;
   shellType?: string;
+  deviceType?: string;
   connected: boolean;
 };
 
@@ -235,6 +237,9 @@ const buildAITerminalSessionInfo = (
     username: host?.username || session?.username,
     protocol,
     shellType: session?.shellType && session.shellType !== 'unknown' ? session.shellType : undefined,
+    // Suppress deviceType for Mosh sessions — Mosh requires a shell-backed PTY
+    // and cannot connect to vendor CLIs, so network device mode doesn't apply.
+    deviceType: (session?.moshEnabled || host?.moshEnabled) ? undefined : host?.deviceType,
     connected: session?.status === 'connected',
   };
 };
@@ -297,6 +302,7 @@ const AIChatPanelsHostInner: React.FC<AIChatPanelsHostProps> = ({
               deleteSession={aiState.deleteSession}
               updateSessionTitle={aiState.updateSessionTitle}
               updateSessionExternalSessionId={aiState.updateSessionExternalSessionId}
+              retargetSessionScope={aiState.retargetSessionScope}
               addMessageToSession={aiState.addMessageToSession}
               updateLastMessage={aiState.updateLastMessage}
               updateMessageById={aiState.updateMessageById}
@@ -333,6 +339,7 @@ AIChatPanelsHost.displayName = 'AIChatPanelsHost';
 
 interface TerminalLayerProps {
   hosts: Host[];
+  groupConfigs: GroupConfig[];
   keys: SSHKey[];
   identities: Identity[];
   snippets: Snippet[];
@@ -370,6 +377,7 @@ interface TerminalLayerProps {
   onToggleBroadcast?: (workspaceId: string) => void;
   // SFTP side panel
   updateHosts: (hosts: Host[]) => void;
+  sftpDefaultViewMode: 'list' | 'tree';
   sftpDoubleClickBehavior: 'open' | 'transfer';
   sftpAutoSync: boolean;
   sftpShowHiddenFiles: boolean;
@@ -385,6 +393,7 @@ interface TerminalLayerProps {
 
 const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
   hosts,
+  groupConfigs,
   keys,
   identities,
   snippets,
@@ -420,6 +429,7 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
   isBroadcastEnabled,
   onToggleBroadcast,
   updateHosts,
+  sftpDefaultViewMode,
   sftpDoubleClickBehavior,
   sftpAutoSync,
   sftpShowHiddenFiles,
@@ -730,12 +740,19 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
     const startWidth = sidePanelWidth;
 
     let lastWidth = startWidth;
+    let rafId: number | null = null;
     const onMouseMove = (ev: MouseEvent) => {
       const delta = ev.clientX - startX;
       lastWidth = Math.max(280, Math.min(800, startWidth + (sidePanelPosition === 'left' ? delta : -delta)));
-      setSidePanelWidth(lastWidth);
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        setSidePanelWidth(lastWidth);
+      });
     };
     const onMouseUp = () => {
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      setSidePanelWidth(lastWidth);
       sftpResizingRef.current = false;
       persistSidePanelWidth(lastWidth);
       window.removeEventListener('mousemove', onMouseMove);
@@ -756,8 +773,14 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
   const sessionHostsMap = useMemo(() => {
     const map = new Map<string, Host>();
     for (const session of sessions) {
-      const existingHost = hostMap.get(session.hostId);
-      if (existingHost) {
+      const rawHost = hostMap.get(session.hostId);
+      if (rawHost) {
+        // Apply group config defaults so Terminal sees the merged host
+        const groupDefaults = rawHost.group
+          ? resolveGroupDefaults(rawHost.group, groupConfigs)
+          : {};
+        const existingHost = applyGroupDefaults(rawHost, groupDefaults);
+
         const protocol = session.protocol ?? existingHost.protocol;
         const port = session.port ?? existingHost.port;
         const moshEnabled = session.moshEnabled ?? existingHost.moshEnabled;
@@ -789,11 +812,12 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
           tags: [],
           protocol: session.protocol ?? 'local' as const,
           moshEnabled: session.moshEnabled,
+          charset: session.charset,
         });
       }
     }
     return map;
-  }, [sessions, hostMap]);
+  }, [sessions, hostMap, groupConfigs]);
   const sessionChainHostsMap = useMemo(() => {
     const map = new Map<string, Host[]>();
     for (const session of sessions) {
@@ -802,12 +826,19 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
       map.set(
         session.id,
         host.hostChain.hostIds
-          .map((hostId) => hostMap.get(hostId))
+          .map((hostId) => {
+            const rawChainHost = hostMap.get(hostId);
+            if (!rawChainHost) return undefined;
+            const chainGroupDefaults = rawChainHost.group
+              ? resolveGroupDefaults(rawChainHost.group, groupConfigs)
+              : {};
+            return applyGroupDefaults(rawChainHost, chainGroupDefaults);
+          })
           .filter((value): value is Host => Boolean(value)),
       );
     }
     return map;
-  }, [sessions, sessionHostsMap, hostMap]);
+  }, [sessions, sessionHostsMap, hostMap, groupConfigs]);
 
   const validTerminalTabIds = useMemo(() => {
     const ids = new Set<string>();
@@ -819,6 +850,13 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
   const validSessionActivityIds = useMemo(() => {
     return getValidSessionActivityIds(sessions);
   }, [sessions]);
+  const activityTrackedSessions = useMemo(
+    () =>
+      sessions.filter(
+        (session) => session.status !== 'disconnected',
+      ),
+    [sessions],
+  );
 
   const onSplitSessionRef = useRef(onSplitSession);
   onSplitSessionRef.current = onSplitSession;
@@ -1035,15 +1073,16 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
 
   useEffect(() => {
     if (!resizing) return;
-    const onMove = (e: MouseEvent) => {
+    let rafId: number | null = null;
+    let lastDelta = 0;
+    const applySizes = () => {
       const dimension = resizing.direction === 'vertical' ? resizing.startArea.w : resizing.startArea.h;
       if (dimension <= 0) return;
       const total = resizing.startSizes.reduce((acc, n) => acc + n, 0) || 1;
       const pxSizes = resizing.startSizes.map(s => (s / total) * dimension);
       const i = resizing.index;
-      const delta = (resizing.direction === 'vertical' ? e.clientX - resizing.startClient.x : e.clientY - resizing.startClient.y);
-      let a = pxSizes[i] + delta;
-      let b = pxSizes[i + 1] - delta;
+      let a = pxSizes[i] + lastDelta;
+      let b = pxSizes[i + 1] - lastDelta;
       const minPx = Math.min(120, dimension / 2);
       if (a < minPx) {
         const diff = minPx - a;
@@ -1062,10 +1101,23 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
       const newSizes = newPxSizes.map(n => n / totalPx);
       onUpdateSplitSizes(resizing.workspaceId, resizing.splitId, newSizes);
     };
-    const onUp = () => setResizing(null);
+    const onMove = (e: MouseEvent) => {
+      lastDelta = resizing.direction === 'vertical' ? e.clientX - resizing.startClient.x : e.clientY - resizing.startClient.y;
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        applySizes();
+      });
+    };
+    const onUp = () => {
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      applySizes();
+      setResizing(null);
+    };
     window.addEventListener('mousemove', onMove);
     window.addEventListener('mouseup', onUp);
     return () => {
+      if (rafId !== null) cancelAnimationFrame(rafId);
       window.removeEventListener('mousemove', onMove);
       window.removeEventListener('mouseup', onUp);
     };
@@ -1265,7 +1317,7 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
   }, [activeTabId, sessions]);
 
   useEffect(() => {
-    const unsubscribers = sessions.map((session) => {
+    const unsubscribers = activityTrackedSessions.map((session) => {
       const filter = new ChunkedEscapeFilter();
       return onSessionData(session.id, (chunk) => {
         if (!hasNotifiableTerminalOutput(filter, chunk)) return;
@@ -1283,7 +1335,7 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
         unsubscribe();
       }
     };
-  }, [onSessionData, sessions]);
+  }, [activityTrackedSessions, onSessionData]);
 
   // Execute snippet on the focused terminal session
   const handleSnippetClickForFocusedSession = useCallback((command: string, noAutoRun?: boolean) => {
@@ -1332,7 +1384,7 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
   const focusedFontSizeOverridden = hasHostFontSizeOverride(focusedHost);
   const activeTopTabsThemeId = activeSidePanelTab === 'theme' && previewTargetSessionId
     ? (activeThemePreviewId ?? focusedThemeId)
-    : null;
+    : (isVisible ? focusedThemeId : null);
   const appliedPreviewSessionRef = useRef<string | null>(null);
   const customThemes = useCustomThemes();
   const applyTerminalPreviewVars = useCallback((sessionId: string | null, themeId: string | null) => {
@@ -1424,9 +1476,9 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
   }, [activeTopTabsThemeId, applyTopTabsPreviewVars]);
 
   useEffect(() => {
+    const panelOpen = activeSidePanelTab === 'theme' && !!previewTargetSessionId;
     const shouldKeepPreview =
-      activeSidePanelTab === 'theme' &&
-      !!previewTargetSessionId &&
+      panelOpen &&
       !!themePreview.targetSessionId &&
       !!themePreview.themeId;
 
@@ -1437,8 +1489,6 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
       clearTerminalPreviewVars(appliedSessionId);
       appliedPreviewSessionRef.current = null;
     }
-    clearTopTabsPreviewVars();
-
     if (themePreview.targetSessionId || themePreview.themeId) {
       setThemePreview({ targetSessionId: null, themeId: null });
     }
@@ -1613,6 +1663,13 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
       || customThemes.find((theme) => theme.id === themeId)
       || terminalTheme;
   }, [activeThemePreviewId, customThemes, focusedThemeId, terminalTheme]);
+  const sessionLogConfig = useMemo(
+    () =>
+      sessionLogsEnabled && sessionLogsDir
+        ? { enabled: true as const, directory: sessionLogsDir, format: sessionLogsFormat || 'txt' }
+        : undefined,
+    [sessionLogsDir, sessionLogsEnabled, sessionLogsFormat],
+  );
 
   // Resolve the effective theme for the compose bar in workspace mode
   const composeBarThemeColors = useMemo(() => {
@@ -1712,7 +1769,8 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
   }, [activeWorkspace]);
 
   const workspaceSessions = useMemo(() => {
-    return sessions.filter(s => workspaceSessionIds.includes(s.id));
+    const idSet = new Set(workspaceSessionIds);
+    return sessions.filter(s => idSet.has(s.id));
   }, [sessions, workspaceSessionIds]);
 
   // Render focus mode sidebar
@@ -1932,6 +1990,7 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
                           keys={keys}
                           identities={identities}
                           updateHosts={updateHosts}
+                          sftpDefaultViewMode={sftpDefaultViewMode}
                           activeHost={isVisibleSftpPanel ? sftpActiveHost : null}
                           initialLocation={
                             isVisibleSftpPanel
@@ -1947,6 +2006,8 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
                           sftpAutoSync={isVisibleSftpPanel ? sftpAutoSync : false}
                           sftpShowHiddenFiles={sftpShowHiddenFiles}
                           sftpUseCompressedUpload={sftpUseCompressedUpload}
+                          hotkeyScheme={hotkeyScheme}
+                          keyBindings={keyBindings}
                           editorWordWrap={editorWordWrap}
                           setEditorWordWrap={setEditorWordWrap}
                           onGetTerminalCwd={getTerminalCwd}
@@ -2152,7 +2213,7 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
                   isWorkspaceComposeBarOpen={inActiveWorkspace ? isComposeBarOpen : undefined}
                   onBroadcastInput={inActiveWorkspace && activeWorkspace && isBroadcastEnabled?.(activeWorkspace.id) ? handleBroadcastInput : undefined}
                   onSnippetExecutorChange={handleSnippetExecutorChange}
-                  sessionLog={sessionLogsEnabled && sessionLogsDir ? { enabled: true, directory: sessionLogsDir, format: sessionLogsFormat || 'txt' } : undefined}
+                  sessionLog={sessionLogConfig}
                 />
               </div>
             );
@@ -2251,6 +2312,7 @@ const terminalLayerAreEqual = (prev: TerminalLayerProps, next: TerminalLayerProp
     prev.fontSize === next.fontSize &&
     prev.hotkeyScheme === next.hotkeyScheme &&
     prev.keyBindings === next.keyBindings &&
+    prev.sftpDefaultViewMode === next.sftpDefaultViewMode &&
     prev.sftpDoubleClickBehavior === next.sftpDoubleClickBehavior &&
     prev.sftpAutoSync === next.sftpAutoSync &&
     prev.sftpShowHiddenFiles === next.sftpShowHiddenFiles &&

components/ThemeList.tsx

@@ -0,0 +1,124 @@
+/**
+ * Shared theme list component used by both ThemeSelectPanel and ThemeSelectModal
+ */
+import React, { memo, useMemo } from 'react';
+import { Check } from 'lucide-react';
+import { useI18n } from '../application/i18n/I18nProvider';
+import { TERMINAL_THEMES } from '../infrastructure/config/terminalThemes';
+import { useCustomThemes } from '../application/state/customThemeStore';
+import { cn } from '../lib/utils';
+import { TerminalTheme } from '../types';
+
+// Memoized theme item component
+export const ThemeItem = memo(({
+    theme,
+    isSelected,
+    onSelect
+}: {
+    theme: TerminalTheme;
+    isSelected: boolean;
+    onSelect: (id: string) => void;
+}) => (
+    <button
+        onClick={() => onSelect(theme.id)}
+        className={cn(
+            'w-full flex items-center gap-3 px-3 py-2.5 text-left transition-all',
+            isSelected
+                ? 'bg-primary/10'
+                : 'hover:bg-muted'
+        )}
+    >
+        {/* Color swatch preview */}
+        <div
+            className="w-12 h-8 rounded-[4px] flex-shrink-0 flex flex-col justify-center items-start pl-1.5 gap-0.5 border border-border/50"
+            style={{ backgroundColor: theme.colors.background }}
+        >
+            <div className="h-1 w-4 rounded-full" style={{ backgroundColor: theme.colors.green }} />
+            <div className="h-1 w-6 rounded-full" style={{ backgroundColor: theme.colors.blue }} />
+            <div className="h-1 w-3 rounded-full" style={{ backgroundColor: theme.colors.yellow }} />
+        </div>
+        <div className="flex-1 min-w-0">
+            <div className={cn('text-sm font-medium truncate', isSelected ? 'text-primary' : 'text-foreground')}>
+                {theme.name}
+            </div>
+            <div className="text-[10px] text-muted-foreground capitalize">{theme.type}</div>
+        </div>
+        {isSelected && (
+            <Check size={16} className="text-primary flex-shrink-0" />
+        )}
+    </button>
+));
+ThemeItem.displayName = 'ThemeItem';
+
+interface ThemeListProps {
+    selectedThemeId: string;
+    onSelect: (themeId: string) => void;
+}
+
+export const ThemeList: React.FC<ThemeListProps> = ({ selectedThemeId, onSelect }) => {
+    const { t } = useI18n();
+    const customThemes = useCustomThemes();
+
+    const { darkThemes, lightThemes } = useMemo(() => {
+        const dark = TERMINAL_THEMES.filter(t => t.type === 'dark');
+        const light = TERMINAL_THEMES.filter(t => t.type === 'light');
+        return { darkThemes: dark, lightThemes: light };
+    }, []);
+
+    return (
+        <>
+            {/* Dark Themes Section */}
+            <div className="mb-4">
+                <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-2 font-semibold px-3">
+                    {t('settings.terminal.themeModal.darkThemes')}
+                </div>
+                <div className="space-y-1">
+                    {darkThemes.map(theme => (
+                        <ThemeItem
+                            key={theme.id}
+                            theme={theme}
+                            isSelected={selectedThemeId === theme.id}
+                            onSelect={onSelect}
+                        />
+                    ))}
+                </div>
+            </div>
+
+            {/* Light Themes Section */}
+            <div>
+                <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-2 font-semibold px-3">
+                    {t('settings.terminal.themeModal.lightThemes')}
+                </div>
+                <div className="space-y-1">
+                    {lightThemes.map(theme => (
+                        <ThemeItem
+                            key={theme.id}
+                            theme={theme}
+                            isSelected={selectedThemeId === theme.id}
+                            onSelect={onSelect}
+                        />
+                    ))}
+                </div>
+            </div>
+
+            {/* Custom Themes Section */}
+            {customThemes.length > 0 && (
+                <div className="mt-4">
+                    <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-2 font-semibold px-3">
+                        {t('terminal.customTheme.section')}
+                    </div>
+                    <div className="space-y-1">
+                        {customThemes.map(theme => (
+                            <ThemeItem
+                                key={theme.id}
+                                theme={theme}
+                                isSelected={selectedThemeId === theme.id}
+                                onSelect={onSelect}
+                            />
+                        ))}
+                    </div>
+                </div>
+            )}
+        </>
+    );
+};

components/ThemeSelectPanel.tsx

@@ -1,13 +1,10 @@
-import React, { useMemo, useState } from 'react';
-import { TERMINAL_THEMES } from '../infrastructure/config/terminalThemes';
-import { useCustomThemes } from '../application/state/customThemeStore';
-import { cn } from '../lib/utils';
-import { TerminalTheme } from '../types';
+import React from 'react';
 import {
     AsidePanel,
     AsidePanelContent,
 } from './ui/aside-panel';
 import { ScrollArea } from './ui/scroll-area';
+import { ThemeList } from './ThemeList';
 
 interface ThemeSelectPanelProps {
     open: boolean;
@@ -18,40 +15,6 @@ interface ThemeSelectPanelProps {
     showBackButton?: boolean;
 }
 
-// Mini terminal preview component
-const TerminalPreview: React.FC<{ theme: TerminalTheme; isSelected: boolean }> = ({
-    theme,
-    isSelected
-}) => {
-    return (
-        <div
-            className={cn(
-                "w-16 h-10 rounded-md overflow-hidden border-2 flex-shrink-0",
-                isSelected ? "border-primary" : "border-transparent"
-            )}
-            style={{ backgroundColor: theme.colors.background }}
-        >
-            <div className="p-1 text-[4px] font-mono leading-tight" style={{ color: theme.colors.foreground }}>
-                <div>
-                    <span style={{ color: theme.colors.green }}>$</span>{' '}
-                    <span style={{ color: theme.colors.cyan }}>ls</span>
-                </div>
-                <div className="flex gap-0.5 flex-wrap">
-                    <span style={{ color: theme.colors.blue }}>dir/</span>
-                    <span style={{ color: theme.colors.green }}>file</span>
-                </div>
-                <div>
-                    <span style={{ color: theme.colors.green }}>$</span>{' '}
-                    <span
-                        className="inline-block w-1 h-1.5"
-                        style={{ backgroundColor: theme.colors.cursor }}
-                    />
-                </div>
-            </div>
-        </div>
-    );
-};
-
 const ThemeSelectPanel: React.FC<ThemeSelectPanelProps> = ({
     open,
     selectedThemeId,
@@ -60,51 +23,6 @@ const ThemeSelectPanel: React.FC<ThemeSelectPanelProps> = ({
     onBack,
     showBackButton = true,
 }) => {
-    // Reserved for future hover preview feature
-    const [_hoveredThemeId, setHoveredThemeId] = useState<string | null>(null);
-
-    const customThemes = useCustomThemes();
-
-    // All themes combined
-    const allThemes = useMemo(() => {
-        return [...TERMINAL_THEMES, ...customThemes];
-    }, [customThemes]);
-
-    const renderThemeItem = (theme: TerminalTheme) => {
-        const isSelected = theme.id === selectedThemeId;
-
-        return (
-            <button
-                key={theme.id}
-                className={cn(
-                    "w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors text-left",
-                    isSelected
-                        ? "bg-primary/10"
-                        : "hover:bg-secondary/50"
-                )}
-                onClick={() => onSelect(theme.id)}
-                onMouseEnter={() => setHoveredThemeId(theme.id)}
-                onMouseLeave={() => setHoveredThemeId(null)}
-            >
-                <TerminalPreview theme={theme} isSelected={isSelected} />
-                <div className="flex-1 min-w-0">
-                    <div className={cn(
-                        "text-sm font-medium truncate",
-                        isSelected && "text-primary"
-                    )}>
-                        {theme.name}
-                    </div>
-                    {theme.id === 'netcatty-dark' && (
-                        <div className="text-xs text-muted-foreground">Default</div>
-                    )}
-                    {theme.id === 'netcatty-light' && (
-                        <div className="text-xs text-muted-foreground">Light mode</div>
-                    )}
-                </div>
-            </button>
-        );
-    };
-
     return (
         <AsidePanel
             open={open}
@@ -116,8 +34,10 @@ const ThemeSelectPanel: React.FC<ThemeSelectPanelProps> = ({
             <AsidePanelContent className="p-0">
                 <ScrollArea className="h-full">
                     <div className="py-2">
-                        {/* All themes in a single list */}
-                        {allThemes.map(renderThemeItem)}
+                        <ThemeList
+                            selectedThemeId={selectedThemeId || ''}
+                            onSelect={onSelect}
+                        />
                     </div>
                 </ScrollArea>
             </AsidePanelContent>

components/TopTabs.tsx

@@ -522,7 +522,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                 {activeTabId === session.id && (
                   <div
                     className="absolute top-0 left-0 right-0 h-[2px]"
-                    style={{ backgroundColor: 'var(--top-tabs-fg, hsl(var(--foreground)))' }}
+                    style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--accent)))' }}
                   />
                 )}
                 {/* Drop indicator line - before */}
@@ -621,7 +621,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                 {isActive && (
                   <div
                     className="absolute top-0 left-0 right-0 h-[2px]"
-                    style={{ backgroundColor: 'var(--top-tabs-fg, hsl(var(--foreground)))' }}
+                    style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--accent)))' }}
                   />
                 )}
                 {/* Drop indicator line - before */}
@@ -826,7 +826,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
             {isSftpActive && (
               <div
                 className="absolute top-0 left-0 right-0 h-[2px]"
-                style={{ backgroundColor: 'var(--top-tabs-fg, hsl(var(--foreground)))' }}
+                style={{ backgroundColor: 'var(--top-tabs-accent, hsl(var(--accent)))' }}
               />
             )}
             <Folder size={14} /> SFTP

components/TrayPanel.tsx

@@ -10,6 +10,7 @@ import { I18nProvider } from "../application/i18n/I18nProvider";
 import { useSettingsState } from "../application/state/useSettingsState";
 import { useTrayPanelBackend } from "../application/state/useTrayPanelBackend";
 import { useActiveTabId } from "../application/state/activeTabStore";
+import { resolveGroupDefaults, applyGroupDefaults } from "../domain/groupConfig";
 import { X, Maximize2, ChevronRight, ChevronDown, Power } from "lucide-react";
 import { AppLogo } from "./AppLogo";
 
@@ -116,7 +117,7 @@ const TrayPanelContent: React.FC = () => {
     onTrayPanelMenuData,
   } = useTrayPanelBackend();
 
-  const { hosts, keys, identities } = useVaultState();
+  const { hosts, keys, identities, groupConfigs } = useVaultState();
   useSessionState();
   const { rules: portForwardingRules, startTunnel, stopTunnel } = usePortForwardingState();
   const activeTabId = useActiveTabId();
@@ -326,14 +327,17 @@ const TrayPanelContent: React.FC = () => {
                     disabled={isConnecting}
                     title={label}
                     onClick={() => {
-                      const host = rule.hostId ? hosts.find((h) => h.id === rule.hostId) : undefined;
-                      if (!host) {
+                      const rawHost = rule.hostId ? hosts.find((h) => h.id === rule.hostId) : undefined;
+                      if (!rawHost) {
                         toast.error(t("pf.error.hostNotFound"));
                         return;
                       }
                       if (isActive) {
                         void stopTunnel(rule.id);
                       } else {
+                        const host = rawHost.group
+                          ? applyGroupDefaults(rawHost, resolveGroupDefaults(rawHost.group, groupConfigs))
+                          : rawHost;
                         void startTunnel(rule, host, hosts, keys, identities, (status, error) => {
                           if (status === "error" && error) toast.error(error);
                         }, rule.autoStart);

components/VaultView.tsx

@@ -4,6 +4,7 @@ import {
   CheckSquare,
   ChevronDown,
   ClipboardCopy,
+  Clock,
   Copy,
   Download,
   Edit2,
@@ -15,11 +16,13 @@ import {
   LayoutGrid,
   List,
   Network,
+  Pin,
   Plug,
   Plus,
   Search,
   Settings,
   Square,
+  Star,
   TerminalSquare,
   Trash2,
   Upload,
@@ -27,19 +30,21 @@ import {
   X,
   Zap,
 } from "lucide-react";
-import React, { Suspense, lazy, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { Suspense, lazy, memo, startTransition, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { useStoredViewMode } from "../application/state/useStoredViewMode";
 import { useStoredBoolean } from "../application/state/useStoredBoolean";
 import { useTreeExpandedState } from "../application/state/useTreeExpandedState";
+import { resolveGroupDefaults, applyGroupDefaults } from "../domain/groupConfig";
 import { getEffectiveHostDistro, sanitizeHost } from "../domain/host";
 import { importVaultHostsFromText, exportHostsToCsvWithStats } from "../domain/vaultImport";
 import type { VaultImportFormat } from "../domain/vaultImport";
-import { STORAGE_KEY_VAULT_HOSTS_VIEW_MODE, STORAGE_KEY_VAULT_HOSTS_TREE_EXPANDED, STORAGE_KEY_VAULT_SIDEBAR_COLLAPSED } from "../infrastructure/config/storageKeys";
+import { STORAGE_KEY_VAULT_HOSTS_VIEW_MODE, STORAGE_KEY_VAULT_HOSTS_TREE_EXPANDED, STORAGE_KEY_VAULT_SIDEBAR_COLLAPSED, STORAGE_KEY_SHOW_RECENT_HOSTS } from "../infrastructure/config/storageKeys";
 import { cn } from "../lib/utils";
 import { useInstantThemeSwitch } from "../lib/useInstantThemeSwitch";
 import {
   ConnectionLog,
+  GroupConfig,
   GroupNode,
   Host,
   HostProtocol,
@@ -54,6 +59,7 @@ import {
 } from "../types";
 import { AppLogo } from "./AppLogo";
 import { DistroAvatar } from "./DistroAvatar";
+import GroupDetailsPanel from "./GroupDetailsPanel";
 import HostDetailsPanel from "./HostDetailsPanel";
 import { HostTreeView } from "./HostTreeView";
 import KeychainManager from "./KeychainManager";
@@ -115,7 +121,7 @@ interface VaultViewProps {
   onOpenSettings: () => void;
   onOpenQuickSwitcher: () => void;
   onCreateLocalTerminal: () => void;
-  onConnectSerial?: (config: SerialConfig) => void;
+  onConnectSerial?: (config: SerialConfig, options?: { charset?: string }) => void;
   onDeleteHost: (id: string) => void;
   onConnect: (host: Host) => void;
   onUpdateHosts: (hosts: Host[]) => void;
@@ -135,6 +141,8 @@ interface VaultViewProps {
   onClearUnsavedConnectionLogs: () => void;
   onOpenLogView: (log: ConnectionLog) => void;
   onRunSnippet?: (snippet: Snippet, targetHosts: Host[]) => void;
+  groupConfigs: GroupConfig[];
+  onUpdateGroupConfigs: (configs: GroupConfig[]) => void;
   // Optional: navigate to a specific section on mount or when changed
   navigateToSection?: VaultSection | null;
   onNavigateToSectionHandled?: () => void;
@@ -179,11 +187,15 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
   onClearUnsavedConnectionLogs,
   onOpenLogView,
   onRunSnippet,
+  groupConfigs,
+  onUpdateGroupConfigs,
   navigateToSection,
   onNavigateToSectionHandled,
 }) => {
   const { t } = useI18n();
   const rootRef = useRef<HTMLDivElement>(null);
+  const hostsRef = useRef(hosts);
+  hostsRef.current = hosts;
   const [currentSection, setCurrentSection] = useState<VaultSection>("hosts");
   const [search, setSearch] = useState("");
   const [selectedGroupPath, setSelectedGroupPath] = useState<string | null>(
@@ -210,6 +222,13 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
     false,
   );
 
+  const [isBreadcrumbDragOver, setIsBreadcrumbDragOver] = useState(false);
+
+  const [showRecentHosts, _setShowRecentHosts] = useStoredBoolean(
+    STORAGE_KEY_SHOW_RECENT_HOSTS,
+    true,
+  );
+
   // Handle external navigation requests
   useEffect(() => {
     if (navigateToSection) {
@@ -234,6 +253,17 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
   const [editingHost, setEditingHost] = useState<Host | null>(null);
   const [newHostGroupPath, setNewHostGroupPath] = useState<string | null>(null);
 
+  // Group panel state
+  const [isGroupPanelOpen, setIsGroupPanelOpen] = useState(false);
+  const [editingGroupPath, setEditingGroupPath] = useState<string | null>(null);
+
+  // Compute inherited group defaults for the host being edited
+  const editingHostGroupDefaults = useMemo(() => {
+    const group = editingHost?.group || newHostGroupPath || selectedGroupPath;
+    if (!group) return undefined;
+    return resolveGroupDefaults(group, groupConfigs);
+  }, [editingHost, newHostGroupPath, selectedGroupPath, groupConfigs]);
+
   // Quick connect state
   const [quickConnectTarget, setQuickConnectTarget] = useState<{
     hostname: string;
@@ -278,30 +308,37 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
     [isSearchQuickConnect, handleConnectClick],
   );
 
-  // Check if host has multiple protocols enabled
+  // Check if host has multiple protocols enabled (using effective/resolved host)
   const hasMultipleProtocols = useCallback((host: Host) => {
+    const effective = host.group
+      ? applyGroupDefaults(host, resolveGroupDefaults(host.group, groupConfigs))
+      : host;
     let count = 0;
     // SSH is always available as base protocol (unless explicitly set to something else)
-    if (host.protocol === "ssh" || !host.protocol) count++;
+    if (effective.protocol === "ssh" || !effective.protocol) count++;
     // Mosh adds another option
-    if (host.moshEnabled) count++;
+    if (effective.moshEnabled) count++;
     // Telnet adds another option
-    if (host.telnetEnabled) count++;
+    if (effective.telnetEnabled) count++;
     // If protocol is explicitly telnet (not ssh), count it
-    if (host.protocol === "telnet" && !host.telnetEnabled) count++;
+    if (effective.protocol === "telnet" && !effective.telnetEnabled) count++;
     return count > 1;
-  }, []);
+  }, [groupConfigs]);
 
   // Handle host connect with protocol selection
   const handleHostConnect = useCallback(
     (host: Host) => {
       if (hasMultipleProtocols(host)) {
-        setProtocolSelectHost(host);
+        // Pass effective host to protocol dialog so it shows correct ports/protocols
+        const effective = host.group
+          ? applyGroupDefaults(host, resolveGroupDefaults(host.group, groupConfigs))
+          : host;
+        setProtocolSelectHost(effective);
       } else {
         onConnect(host);
       }
     },
-    [hasMultipleProtocols, onConnect],
+    [hasMultipleProtocols, onConnect, groupConfigs],
   );
 
   // Handle protocol selection
@@ -342,12 +379,16 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
   );
 
   const handleNewHost = useCallback(() => {
+    setIsGroupPanelOpen(false);
+    setEditingGroupPath(null);
     setEditingHost(null);
     setNewHostGroupPath(null);
     setIsHostPanelOpen(true);
   }, []);
 
   const handleEditHost = useCallback((host: Host) => {
+    setIsGroupPanelOpen(false);
+    setEditingGroupPath(null);
     setEditingHost(host);
     setIsHostPanelOpen(true);
   }, []);
@@ -359,6 +400,8 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
       id: crypto.randomUUID(),
       label: `${host.label} (${t('action.copy')})`,
       createdAt: Date.now(),
+      pinned: undefined,
+      lastConnectedAt: undefined,
     };
     // Open the edit panel with the duplicated host for modification
     setEditingHost(duplicatedHost);
@@ -398,38 +441,42 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
 
   // Copy host credentials to clipboard
   const handleCopyCredentials = useCallback((host: Host) => {
+    // Apply group defaults so inherited credentials are included
+    const effective = host.group
+      ? applyGroupDefaults(host, resolveGroupDefaults(host.group, groupConfigs))
+      : host;
     // Only use telnet-specific port and credentials when protocol is explicitly telnet
     // Don't treat telnetEnabled as primary - that's just an optional protocol
-    const isTelnet = host.protocol === "telnet";
+    const isTelnet = effective.protocol === "telnet";
 
     const defaultPort = isTelnet ? 23 : 22;
     const effectivePort = isTelnet
-      ? (host.telnetPort ?? host.port ?? 23)
-      : (host.port ?? 22);
+      ? (effective.telnetPort ?? effective.port ?? 23)
+      : (effective.port ?? 22);
 
     // Bracket IPv6 addresses when appending non-default port
     let address: string;
     if (effectivePort !== defaultPort) {
-      const isIPv6 = host.hostname.includes(":") && !host.hostname.startsWith("[");
-      const hostname = isIPv6 ? `[${host.hostname}]` : host.hostname;
+      const isIPv6 = effective.hostname.includes(":") && !effective.hostname.startsWith("[");
+      const hostname = isIPv6 ? `[${effective.hostname}]` : effective.hostname;
       address = `${hostname}:${effectivePort}`;
     } else {
-      address = host.hostname;
+      address = effective.hostname;
     }
 
     // Resolve credentials from identity if configured, otherwise use host credentials
     // For telnet hosts, use telnet-specific credentials
-    const identity = host.identityId
-      ? identities.find((i) => i.id === host.identityId)
+    const identity = effective.identityId
+      ? identities.find((i) => i.id === effective.identityId)
       : undefined;
 
     const username = isTelnet
-      ? (host.telnetUsername?.trim() || host.username?.trim())
-      : (identity?.username?.trim() || host.username?.trim());
+      ? (effective.telnetUsername?.trim() || effective.username?.trim())
+      : (identity?.username?.trim() || effective.username?.trim());
 
     const password = isTelnet
-      ? (host.telnetPassword || host.password)
-      : (identity?.password || host.password);
+      ? (effective.telnetPassword || effective.password)
+      : (identity?.password || effective.password);
 
     if (!password) {
       toast.warning(t('vault.hosts.copyCredentials.toast.noPassword'));
@@ -440,7 +487,19 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
     navigator.clipboard.writeText(text).then(() => {
       toast.success(t('vault.hosts.copyCredentials.toast.success'));
     });
-  }, [identities, t]);
+  }, [identities, groupConfigs, t]);
+
+  const [lastPinnedId, setLastPinnedId] = useState<string | null>(null);
+  const toggleHostPinned = useCallback((hostId: string) => {
+    const host = hostsRef.current.find((h) => h.id === hostId);
+    const isPinning = host && !host.pinned;
+    startTransition(() => {
+      onUpdateHosts(hostsRef.current.map((h) =>
+        h.id === hostId ? { ...h, pinned: !h.pinned } : h
+      ));
+    });
+    setLastPinnedId(isPinning ? hostId : null);
+  }, [onUpdateHosts]);
 
   const toggleHostSelection = useCallback((hostId: string) => {
     setSelectedHostIds(prev => {
@@ -826,6 +885,63 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
     return filtered;
   }, [hosts, selectedGroupPath, search, selectedTags, sortMode]);
 
+  // Pinned hosts for root-level display (not inside a subgroup)
+  // Respects active search and tag filters
+  const pinnedHosts = useMemo(() => {
+    if (selectedGroupPath) return [];
+    let filtered = hosts.filter((h) => h.pinned);
+    if (search.trim()) {
+      const s = search.toLowerCase();
+      filtered = filtered.filter(
+        (h) =>
+          h.label.toLowerCase().includes(s) ||
+          h.hostname.toLowerCase().includes(s) ||
+          h.tags.some((t) => t.toLowerCase().includes(s)),
+      );
+    }
+    if (selectedTags.length > 0) {
+      filtered = filtered.filter((h) =>
+        selectedTags.some((t) => h.tags?.includes(t)),
+      );
+    }
+    return filtered.sort((a, b) => a.label.localeCompare(b.label));
+  }, [hosts, selectedGroupPath, search, selectedTags]);
+
+  // Recently connected hosts for root-level display
+  // Respects active search and tag filters
+  const recentHosts = useMemo(() => {
+    if (selectedGroupPath) return [];
+    let filtered = hosts.filter((h) => h.lastConnectedAt);
+    if (search.trim()) {
+      const s = search.toLowerCase();
+      filtered = filtered.filter(
+        (h) =>
+          h.label.toLowerCase().includes(s) ||
+          h.hostname.toLowerCase().includes(s) ||
+          h.tags.some((t) => t.toLowerCase().includes(s)),
+      );
+    }
+    if (selectedTags.length > 0) {
+      filtered = filtered.filter((h) =>
+        selectedTags.some((t) => h.tags?.includes(t)),
+      );
+    }
+    return filtered
+      .sort((a, b) => (b.lastConnectedAt || 0) - (a.lastConnectedAt || 0))
+      .slice(0, 20);
+  }, [hosts, selectedGroupPath, search, selectedTags]);
+
+  // IDs of hosts already shown in Pinned/Recent sections at root level,
+  // so the main host list can exclude them to avoid duplicates.
+  const pinnedRecentIds = useMemo(() => {
+    const ids = new Set<string>();
+    for (const h of pinnedHosts) ids.add(h.id);
+    if (showRecentHosts) {
+      for (const h of recentHosts) ids.add(h.id);
+    }
+    return ids;
+  }, [pinnedHosts, recentHosts, showRecentHosts]);
+
   // For tree view: apply search, tag filter, and sorting, but not group filtering
   const treeViewHosts = useMemo(() => {
     let filtered = hosts;
@@ -1118,6 +1234,68 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
     setIsRenameGroupOpen(false);
   };
 
+  const handleEditGroupConfig = useCallback((groupPath: string) => {
+    setIsHostPanelOpen(false);
+    setEditingHost(null);
+    setEditingGroupPath(groupPath);
+    setIsGroupPanelOpen(true);
+  }, []);
+
+  const handleSaveGroupConfig = useCallback((config: GroupConfig, _newName?: string, _newParent?: string | null) => {
+    const oldPath = editingGroupPath!;
+    const newPath = config.path; // Panel already computed the correct path
+
+    // Validate no duplicate path on rename/reparent
+    if (newPath !== oldPath && customGroups.includes(newPath)) {
+      toast.error(t('vault.groups.errors.duplicatePath'));
+      return;
+    }
+
+    // Save config (use new path)
+    const updatedConfigs = [...groupConfigs.filter(c => c.path !== oldPath), config];
+
+    // Handle path change (rename or parent change)
+    if (newPath !== oldPath) {
+      // Update groups, hosts, managed sources, and configs for path change
+      const updatedGroups = customGroups.map((g) => {
+        if (g === oldPath) return newPath;
+        if (g.startsWith(oldPath + '/')) return newPath + g.slice(oldPath.length);
+        return g;
+      });
+      const updatedHosts = hosts.map((h) => {
+        const g = h.group || '';
+        if (g === oldPath) return { ...h, group: newPath };
+        if (g.startsWith(oldPath + '/')) return { ...h, group: newPath + g.slice(oldPath.length) };
+        return h;
+      });
+      const updatedManagedSources = managedSources.map((s) => {
+        if (s.groupName === oldPath) return { ...s, groupName: newPath };
+        if (s.groupName.startsWith(oldPath + '/')) return { ...s, groupName: newPath + s.groupName.slice(oldPath.length) };
+        return s;
+      });
+      if (updatedManagedSources.some((s, i) => s !== managedSources[i])) {
+        onUpdateManagedSources(updatedManagedSources);
+      }
+      onUpdateCustomGroups(Array.from(new Set(updatedGroups)));
+      onUpdateHosts(updatedHosts);
+      // Update child config paths too
+      const finalConfigs = updatedConfigs.map(c => {
+        if (c.path.startsWith(oldPath + '/')) return { ...c, path: newPath + c.path.slice(oldPath.length) };
+        return c;
+      });
+      onUpdateGroupConfigs(finalConfigs);
+      if (selectedGroupPath === oldPath) setSelectedGroupPath(newPath);
+      if (selectedGroupPath?.startsWith(oldPath + '/')) {
+        setSelectedGroupPath(newPath + selectedGroupPath.slice(oldPath.length));
+      }
+    } else {
+      onUpdateGroupConfigs(updatedConfigs);
+    }
+
+    setIsGroupPanelOpen(false);
+    setEditingGroupPath(null);
+  }, [groupConfigs, editingGroupPath, customGroups, hosts, managedSources, selectedGroupPath, onUpdateGroupConfigs, onUpdateCustomGroups, onUpdateHosts, onUpdateManagedSources, t]);
+
   const deleteGroupPath = async (path: string, deleteHosts: boolean = false) => {
     const keepGroups = customGroups.filter(
       (g) => !(g === path || g.startsWith(path + "/")),
@@ -1172,6 +1350,13 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
 
     onUpdateCustomGroups(keepGroups);
     onUpdateHosts(keepHosts);
+    // Remove configs for deleted group and its children
+    const updatedGroupConfigs = groupConfigs.filter(
+      (c) => c.path !== path && !c.path.startsWith(path + '/')
+    );
+    if (updatedGroupConfigs.length !== groupConfigs.length) {
+      onUpdateGroupConfigs(updatedGroupConfigs);
+    }
     if (
       selectedGroupPath &&
       (selectedGroupPath === path || selectedGroupPath.startsWith(path + "/"))
@@ -1184,23 +1369,27 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
     const name = sourcePath.split("/").filter(Boolean).pop() || "";
     const newPath = targetParent ? `${targetParent}/${name}` : name;
     if (newPath === sourcePath || newPath.startsWith(sourcePath + "/")) return;
+    if (customGroups.includes(newPath)) {
+      toast.error(t('vault.groups.errors.duplicatePath'));
+      return;
+    }
     const updatedGroups = customGroups.map((g) => {
       if (g === sourcePath) return newPath;
-      if (g.startsWith(sourcePath + "/")) return g.replace(sourcePath, newPath);
+      if (g.startsWith(sourcePath + "/")) return newPath + g.slice(sourcePath.length);
       return g;
     });
     const updatedHosts = hosts.map((h) => {
       const g = h.group || "";
       if (g === sourcePath) return { ...h, group: newPath };
       if (g.startsWith(sourcePath + "/"))
-        return { ...h, group: g.replace(sourcePath, newPath) };
+        return { ...h, group: newPath + g.slice(sourcePath.length) };
       return h;
     });
     // Update managed sources if any match the moved group path
     const updatedManagedSources = managedSources.map((s) => {
       if (s.groupName === sourcePath) return { ...s, groupName: newPath };
       if (s.groupName.startsWith(sourcePath + "/"))
-        return { ...s, groupName: s.groupName.replace(sourcePath, newPath) };
+        return { ...s, groupName: newPath + s.groupName.slice(sourcePath.length) };
       return s;
     });
     if (updatedManagedSources.some((s, i) => s !== managedSources[i])) {
@@ -1208,6 +1397,16 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
     }
     onUpdateCustomGroups(Array.from(new Set(updatedGroups)));
     onUpdateHosts(updatedHosts);
+    // Update group configs for moved paths
+    const updatedGroupConfigs = groupConfigs.map((c) => {
+      if (c.path === sourcePath) return { ...c, path: newPath };
+      if (c.path.startsWith(sourcePath + '/'))
+        return { ...c, path: newPath + c.path.slice(sourcePath.length) };
+      return c;
+    });
+    if (updatedGroupConfigs.some((c, i) => c !== groupConfigs[i])) {
+      onUpdateGroupConfigs(updatedGroupConfigs);
+    }
     if (
       selectedGroupPath &&
       (selectedGroupPath === sourcePath ||
@@ -1639,8 +1838,24 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                   {viewMode !== "tree" && (
                     <div className="flex items-center gap-2 text-sm font-semibold">
                       <button
-                        className="text-primary hover:underline"
+                        className={cn(
+                          "text-primary hover:underline transition-all rounded px-1 -mx-1",
+                          isBreadcrumbDragOver && "ring-2 ring-primary bg-primary/10",
+                        )}
                         onClick={() => setSelectedGroupPath(null)}
+                        onDragOver={(e) => {
+                          e.preventDefault();
+                          setIsBreadcrumbDragOver(true);
+                        }}
+                        onDragLeave={() => setIsBreadcrumbDragOver(false)}
+                        onDrop={(e) => {
+                          e.preventDefault();
+                          setIsBreadcrumbDragOver(false);
+                          const groupPath = e.dataTransfer.getData("group-path");
+                          const hostId = e.dataTransfer.getData("host-id");
+                          if (groupPath) moveGroup(groupPath, null);
+                          if (hostId) moveHostToGroup(hostId, null);
+                        }}
                       >
                         {t("vault.hosts.allHosts")}
                       </button>
@@ -1674,6 +1889,201 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                           })}
                     </div>
                   )}
+                  {/* Pinned hosts section - only at root level */}
+                  {viewMode !== "tree" && !selectedGroupPath && pinnedHosts.length > 0 && (
+                    <section className="space-y-2 mb-4">
+                      <h3 className="text-sm font-semibold text-muted-foreground inline-flex items-center gap-1.5">
+                        <Pin size={14} className="shrink-0 -translate-y-[1px]" />
+                        {t("vault.hosts.pinned")}
+                      </h3>
+                      <div className={cn(
+                        viewMode === "grid"
+                          ? "grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+                          : "flex flex-col gap-0",
+                      )}>
+                        {pinnedHosts.map((host) => {
+                          const safeHost = sanitizeHost(host);
+                          const effectiveDistro = getEffectiveHostDistro(safeHost);
+                          const distroBadge = {
+                            text: (safeHost.os || "L")[0].toUpperCase(),
+                            label: effectiveDistro || safeHost.os || "Linux",
+                          };
+                          return (
+                            <ContextMenu key={host.id}>
+                              <ContextMenuTrigger>
+                                <div
+                                  className={cn(
+                                    "group cursor-pointer relative",
+                                    viewMode === "grid"
+                                      ? "soft-card elevate rounded-xl h-[68px] px-3 py-2"
+                                      : "h-14 px-3 py-2 hover:bg-secondary/60 rounded-lg transition-colors",
+                                  )}
+                                  style={lastPinnedId === host.id ? { animation: "pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both" } : undefined}
+                                  onAnimationEnd={() => { if (lastPinnedId === host.id) setLastPinnedId(null); }}
+                                  draggable={!isMultiSelectMode}
+                                  onDragStart={(e) => {
+                                    e.dataTransfer.effectAllowed = "move";
+                                    e.dataTransfer.setData("host-id", host.id);
+                                  }}
+                                  onClick={() => {
+                                    if (isMultiSelectMode) {
+                                      toggleHostSelection(host.id);
+                                    } else {
+                                      handleHostConnect(safeHost);
+                                    }
+                                  }}
+                                >
+                                  {viewMode === "grid" && (
+                                    <Star size={10} className="absolute top-1.5 right-1.5 text-amber-400 fill-amber-400" />
+                                  )}
+                                  <div className="flex items-center gap-3 h-full">
+                                    {isMultiSelectMode && (
+                                      <div className="shrink-0">
+                                        {selectedHostIds.has(host.id) ? (
+                                          <CheckSquare size={18} className="text-primary" />
+                                        ) : (
+                                          <Square size={18} className="text-muted-foreground" />
+                                        )}
+                                      </div>
+                                    )}
+                                    <DistroAvatar host={safeHost} fallback={distroBadge.text} />
+                                    <div className="min-w-0 flex flex-col justify-center gap-0.5 flex-1">
+                                      <span className="text-sm font-semibold truncate leading-5">
+                                        {safeHost.label}
+                                      </span>
+                                      <div className="text-[11px] text-muted-foreground font-mono truncate leading-4">
+                                        {safeHost.username}@{safeHost.hostname}
+                                      </div>
+                                    </div>
+                                    <Button
+                                      variant="ghost"
+                                      size="icon"
+                                      className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleEditHost(host);
+                                      }}
+                                    >
+                                      <Edit2 size={14} />
+                                    </Button>
+                                  </div>
+                                </div>
+                              </ContextMenuTrigger>
+                              <ContextMenuContent>
+                                <ContextMenuItem onClick={() => handleHostConnect(host)}>
+                                  <Plug className="mr-2 h-4 w-4" /> {t('vault.hosts.connect')}
+                                </ContextMenuItem>
+                                <ContextMenuItem onClick={() => handleEditHost(host)}>
+                                  <Edit2 className="mr-2 h-4 w-4" /> {t('action.edit')}
+                                </ContextMenuItem>
+                                <ContextMenuItem onClick={() => toggleHostPinned(host.id)}>
+                                  <Pin className="mr-2 h-4 w-4" /> {t('vault.hosts.unpin')}
+                                </ContextMenuItem>
+                                <ContextMenuItem className="text-destructive" onClick={() => onDeleteHost(host.id)}>
+                                  <Trash2 className="mr-2 h-4 w-4" /> {t('action.delete')}
+                                </ContextMenuItem>
+                              </ContextMenuContent>
+                            </ContextMenu>
+                          );
+                        })}
+                      </div>
+                    </section>
+                  )}
+                  {/* Recently Connected section - only at root level, toggleable */}
+                  {viewMode !== "tree" && !selectedGroupPath && showRecentHosts && recentHosts.length > 0 && (
+                    <section className="space-y-2 mb-4">
+                      <h3 className="text-sm font-semibold text-muted-foreground inline-flex items-center gap-1.5">
+                        <Clock size={14} className="shrink-0 -translate-y-[1px]" />
+                        {t("vault.hosts.recentlyConnected")}
+                      </h3>
+                      <div className={cn(
+                        viewMode === "grid"
+                          ? "grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+                          : "flex flex-col gap-0",
+                      )}>
+                        {recentHosts.map((host) => {
+                          const safeHost = sanitizeHost(host);
+                          const effectiveDistro = getEffectiveHostDistro(safeHost);
+                          const distroBadge = {
+                            text: (safeHost.os || "L")[0].toUpperCase(),
+                            label: effectiveDistro || safeHost.os || "Linux",
+                          };
+                          return (
+                            <ContextMenu key={host.id}>
+                              <ContextMenuTrigger>
+                                <div
+                                  className={cn(
+                                    "group cursor-pointer relative",
+                                    viewMode === "grid"
+                                      ? "soft-card elevate rounded-xl h-[68px] px-3 py-2"
+                                      : "h-14 px-3 py-2 hover:bg-secondary/60 rounded-lg transition-colors",
+                                  )}
+                                  draggable={!isMultiSelectMode}
+                                  onDragStart={(e) => {
+                                    e.dataTransfer.effectAllowed = "move";
+                                    e.dataTransfer.setData("host-id", host.id);
+                                  }}
+                                  onClick={() => {
+                                    if (isMultiSelectMode) {
+                                      toggleHostSelection(host.id);
+                                    } else {
+                                      handleHostConnect(safeHost);
+                                    }
+                                  }}
+                                >
+                                  <div className="flex items-center gap-3 h-full">
+                                    {isMultiSelectMode && (
+                                      <div className="shrink-0">
+                                        {selectedHostIds.has(host.id) ? (
+                                          <CheckSquare size={18} className="text-primary" />
+                                        ) : (
+                                          <Square size={18} className="text-muted-foreground" />
+                                        )}
+                                      </div>
+                                    )}
+                                    <DistroAvatar host={safeHost} fallback={distroBadge.text} />
+                                    <div className="min-w-0 flex flex-col justify-center gap-0.5 flex-1">
+                                      <span className="text-sm font-semibold truncate leading-5">
+                                        {safeHost.label}
+                                      </span>
+                                      <div className="text-[11px] text-muted-foreground font-mono truncate leading-4">
+                                        {safeHost.username}@{safeHost.hostname}
+                                      </div>
+                                    </div>
+                                    <Button
+                                      variant="ghost"
+                                      size="icon"
+                                      className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleEditHost(host);
+                                      }}
+                                    >
+                                      <Edit2 size={14} />
+                                    </Button>
+                                  </div>
+                                </div>
+                              </ContextMenuTrigger>
+                              <ContextMenuContent>
+                                <ContextMenuItem onClick={() => handleHostConnect(host)}>
+                                  <Plug className="mr-2 h-4 w-4" /> {t('vault.hosts.connect')}
+                                </ContextMenuItem>
+                                <ContextMenuItem onClick={() => handleEditHost(host)}>
+                                  <Edit2 className="mr-2 h-4 w-4" /> {t('action.edit')}
+                                </ContextMenuItem>
+                                <ContextMenuItem onClick={() => toggleHostPinned(host.id)}>
+                                  <Pin className="mr-2 h-4 w-4" /> {host.pinned ? t('vault.hosts.unpin') : t('vault.hosts.pinToTop')}
+                                </ContextMenuItem>
+                                <ContextMenuItem className="text-destructive" onClick={() => onDeleteHost(host.id)}>
+                                  <Trash2 className="mr-2 h-4 w-4" /> {t('action.delete')}
+                                </ContextMenuItem>
+                              </ContextMenuContent>
+                            </ContextMenu>
+                          );
+                        })}
+                      </div>
+                    </section>
+                  )}
                   {viewMode !== "tree" && displayedGroups.length > 0 && (
                     <div className="flex items-center justify-between">
                       <h3 className="text-sm font-semibold text-muted-foreground">
@@ -1756,6 +2166,17 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                                     {t("vault.groups.hostsCount", { count: node.totalHostCount ?? node.hosts.length })}
                                   </div>
                                 </div>
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleEditGroupConfig(node.path);
+                                  }}
+                                >
+                                  <Edit2 size={14} />
+                                </Button>
                               </div>
                             </div>
                           </ContextMenuTrigger>
@@ -1770,14 +2191,9 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                               <FolderPlus className="mr-2 h-4 w-4" /> {t("vault.groups.newSubgroup")}
                             </ContextMenuItem>
                             <ContextMenuItem
-                              onClick={() => {
-                                setRenameTargetPath(node.path);
-                                setRenameGroupName(node.name);
-                                setRenameGroupError(null);
-                                setIsRenameGroupOpen(true);
-                              }}
+                              onClick={() => handleEditGroupConfig(node.path)}
                             >
-                              <Edit2 className="mr-2 h-4 w-4" /> {t("vault.groups.rename")}
+                              <Edit2 className="mr-2 h-4 w-4" /> {t("vault.groups.settings")}
                             </ContextMenuItem>
                             <ContextMenuItem
                               className="text-destructive"
@@ -1867,6 +2283,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                       onDuplicateHost={handleDuplicateHost}
                       onDeleteHost={(host) => onDeleteHost(host.id)}
                       onCopyCredentials={handleCopyCredentials}
+
                       onNewHost={(groupPath) => {
                         setEditingHost(null);
                         setNewHostGroupPath(groupPath || null);
@@ -1877,13 +2294,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                         setNewFolderName("");
                         setIsNewFolderOpen(true);
                       }}
-                      onEditGroup={(groupPath) => {
-                        setRenameTargetPath(groupPath);
-                        const groupName = groupPath.split('/').pop() || '';
-                        setRenameGroupName(groupName);
-                        setRenameGroupError(null);
-                        setIsRenameGroupOpen(true);
-                      }}
+                      onEditGroup={(groupPath) => handleEditGroupConfig(groupPath)}
                       onDeleteGroup={(groupPath) => {
                         setDeleteTargetPath(groupPath);
                         setIsDeleteGroupOpen(true);
@@ -1906,7 +2317,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                                 {group.name || t("vault.groups.ungrouped")}
                               </span>
                               <span className="text-xs text-muted-foreground/60">
-                                ({group.hosts.length})
+                                ({selectedGroupPath ? group.hosts.length : group.hosts.filter((h) => !pinnedRecentIds.has(h.id)).length})
                               </span>
                             </div>
                             <div
@@ -1916,7 +2327,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                                   : "flex flex-col gap-0",
                               )}
                             >
-                              {group.hosts.map((host) => {
+                              {group.hosts.filter((h) => selectedGroupPath || !pinnedRecentIds.has(h.id)).map((host) => {
                                 const safeHost = sanitizeHost(host);
                                 const effectiveDistro = getEffectiveHostDistro(safeHost);
                                 const distroBadge = {
@@ -1928,7 +2339,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                                     <ContextMenuTrigger>
                                       <div
                                         className={cn(
-                                          "group cursor-pointer",
+                                          "group cursor-pointer relative",
                                           viewMode === "grid"
                                             ? "soft-card elevate rounded-xl h-[68px] px-3 py-2"
                                             : "h-14 px-3 py-2 hover:bg-secondary/60 rounded-lg transition-colors",
@@ -1946,6 +2357,9 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                                           }
                                         }}
                                       >
+                                        {host.pinned && viewMode === "grid" && (
+                                          <Star size={10} className="absolute top-1.5 right-1.5 text-amber-400 fill-amber-400" />
+                                        )}
                                         <div className="flex items-center gap-3 h-full">
                                           {isMultiSelectMode && (
                                             <div
@@ -1981,21 +2395,17 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                                               {safeHost.username}@{safeHost.hostname}
                                             </div>
                                           </div>
-                                          {viewMode === "list" && (
-                                            <>
-                                              <Button
-                                                variant="ghost"
-                                                size="icon"
-                                                className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
-                                                onClick={(e) => {
-                                                  e.stopPropagation();
-                                                  handleEditHost(host);
-                                                }}
-                                              >
-                                                <Edit2 size={14} />
-                                              </Button>
-                                            </>
-                                          )}
+                                          <Button
+                                            variant="ghost"
+                                            size="icon"
+                                            className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+                                            onClick={(e) => {
+                                              e.stopPropagation();
+                                              handleEditHost(host);
+                                            }}
+                                          >
+                                            <Edit2 size={14} />
+                                          </Button>
                                         </div>
                                       </div>
                                     </ContextMenuTrigger>
@@ -2020,6 +2430,9 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                                       >
                                         <ClipboardCopy className="mr-2 h-4 w-4" /> {t('vault.hosts.copyCredentials')}
                                       </ContextMenuItem>
+                                      <ContextMenuItem onClick={() => toggleHostPinned(host.id)}>
+                                        <Pin className="mr-2 h-4 w-4" /> {host.pinned ? t('vault.hosts.unpin') : t('vault.hosts.pinToTop')}
+                                      </ContextMenuItem>
                                       <ContextMenuItem
                                         className="text-destructive"
                                         onClick={() => onDeleteHost(host.id)}
@@ -2055,7 +2468,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                           : "flex flex-col gap-0",
                       )}
                     >
-                      {displayedHosts.map((host) => {
+                      {displayedHosts.filter((h) => selectedGroupPath || !pinnedRecentIds.has(h.id)).map((host) => {
                           const safeHost = sanitizeHost(host);
                           const effectiveDistro = getEffectiveHostDistro(safeHost);
                           const distroBadge = {
@@ -2067,7 +2480,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                               <ContextMenuTrigger>
                                 <div
                                   className={cn(
-                                    "group cursor-pointer",
+                                    "group cursor-pointer relative",
                                     viewMode === "grid"
                                       ? "soft-card elevate rounded-xl h-[68px] px-3 py-2"
                                       : "h-14 px-3 py-2 hover:bg-secondary/60 rounded-lg transition-colors",
@@ -2085,6 +2498,9 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                                     }
                                   }}
                                 >
+                                  {host.pinned && viewMode === "grid" && (
+                                    <Star size={10} className="absolute top-1.5 right-1.5 text-amber-400 fill-amber-400" />
+                                  )}
                                   <div className="flex items-center gap-3 h-full">
                                     {isMultiSelectMode && (
                                       <div
@@ -2120,21 +2536,17 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                                         {safeHost.username}@{safeHost.hostname}
                                       </div>
                                     </div>
-                                    {viewMode === "list" && (
-                                      <>
-                                        <Button
-                                          variant="ghost"
-                                          size="icon"
-                                          className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
-                                          onClick={(e) => {
-                                            e.stopPropagation();
-                                            handleEditHost(host);
-                                          }}
-                                        >
-                                          <Edit2 size={14} />
-                                        </Button>
-                                      </>
-                                    )}
+                                    <Button
+                                      variant="ghost"
+                                      size="icon"
+                                      className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleEditHost(host);
+                                      }}
+                                    >
+                                      <Edit2 size={14} />
+                                    </Button>
                                   </div>
                                 </div>
                               </ContextMenuTrigger>
@@ -2159,6 +2571,9 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                                 >
                                   <ClipboardCopy className="mr-2 h-4 w-4" /> {t('vault.hosts.copyCredentials')}
                                 </ContextMenuItem>
+                                <ContextMenuItem onClick={() => toggleHostPinned(host.id)}>
+                                  <Pin className="mr-2 h-4 w-4" /> {host.pinned ? t('vault.hosts.unpin') : t('vault.hosts.pinToTop')}
+                                </ContextMenuItem>
                                 <ContextMenuItem
                                   className="text-destructive"
                                   onClick={() => onDeleteHost(host.id)}
@@ -2268,6 +2683,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
             identities={identities}
             customGroups={customGroups}
             managedSources={managedSources}
+            groupConfigs={groupConfigs}
             onSaveHost={(host) => onUpdateHosts([...hosts, host])}
             onCreateGroup={(groupPath) =>
               onUpdateCustomGroups(
@@ -2299,6 +2715,26 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
         )}
       </div>
 
+      {/* Group Details Panel */}
+      {currentSection === "hosts" && isGroupPanelOpen && editingGroupPath && (
+        <GroupDetailsPanel
+          key={editingGroupPath}
+          groupPath={editingGroupPath}
+          config={groupConfigs.find(c => c.path === editingGroupPath)}
+          availableKeys={keys}
+          identities={identities}
+          allHosts={hosts}
+          groups={allGroupPaths}
+          terminalThemeId={terminalThemeId}
+          terminalFontSize={terminalFontSize}
+          onSave={handleSaveGroupConfig}
+          onCancel={() => {
+            setIsGroupPanelOpen(false);
+            setEditingGroupPath(null);
+          }}
+        />
+      )}
+
       {/* Host Details Panel - positioned at VaultView root level for correct top alignment */}
       {currentSection === "hosts" && isHostPanelOpen && editingHost?.protocol !== 'serial' && (
         <HostDetailsPanel
@@ -2312,6 +2748,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
           defaultGroup={editingHost ? undefined : (newHostGroupPath || selectedGroupPath)}
           terminalThemeId={terminalThemeId}
           terminalFontSize={terminalFontSize}
+          groupDefaults={editingHostGroupDefaults}
           onSave={(host) => {
             // Check if host already exists in the list (for updates vs. new/duplicate)
             const hostExists = hosts.some((h) => h.id === host.id);
@@ -2548,9 +2985,9 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
       <SerialConnectModal
         open={isSerialModalOpen}
         onClose={() => setIsSerialModalOpen(false)}
-        onConnect={(config) => {
+        onConnect={(config, options) => {
           if (onConnectSerial) {
-            onConnectSerial(config);
+            onConnectSerial(config, options);
           }
         }}
         onSaveHost={(host) => {
@@ -2578,6 +3015,7 @@ const vaultViewAreEqual = (
     prev.connectionLogs === next.connectionLogs &&
     prev.sessions === next.sessions &&
     prev.managedSources === next.managedSources &&
+    prev.groupConfigs === next.groupConfigs &&
     prev.terminalThemeId === next.terminalThemeId &&
     prev.terminalFontSize === next.terminalFontSize;
 

components/ai-elements/message.tsx

@@ -25,8 +25,8 @@ export type MessageContentProps = HTMLAttributes<HTMLDivElement>;
 export const MessageContent = ({ children, className, ...props }: MessageContentProps) => (
   <div
     className={cn(
-      'flex w-fit min-w-0 max-w-full flex-col gap-1.5 overflow-hidden text-[13px] leading-relaxed',
-      'group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:border group-[.is-user]:border-border/50 group-[.is-user]:bg-muted/50 group-[.is-user]:px-2.5 group-[.is-user]:py-2',
+      'flex w-fit min-w-0 max-w-full flex-col gap-1.5 text-[13px] leading-relaxed',
+      'group-[.is-user]:ml-auto group-[.is-user]:overflow-hidden group-[.is-user]:rounded-lg group-[.is-user]:border group-[.is-user]:border-border/50 group-[.is-user]:bg-muted/50 group-[.is-user]:px-2.5 group-[.is-user]:py-2',
       'group-[.is-assistant]:w-full group-[.is-assistant]:text-foreground/90',
       className,
     )}

components/ai-elements/tool-call.tsx

@@ -5,6 +5,39 @@ import { Button } from '../ui/button';
 import { Badge } from '../ui/badge';
 import { useI18n } from '../../application/i18n/I18nProvider';
 
+/**
+ * Format tool result for display. Extracts stdout/stderr from structured
+ * command results for terminal-like output.
+ */
+function formatToolResult(result: unknown): string {
+  let parsed = result;
+
+  if (typeof parsed === 'string') {
+    try {
+      const obj = JSON.parse(parsed);
+      if (obj && typeof obj === 'object') parsed = obj;
+    } catch {
+      return parsed;
+    }
+  }
+
+  if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+    const obj = parsed as Record<string, unknown>;
+    if (typeof obj.stdout === 'string' || typeof obj.stderr === 'string') {
+      const parts: string[] = [];
+      if (typeof obj.stdout === 'string' && obj.stdout) parts.push(obj.stdout);
+      if (typeof obj.stderr === 'string' && obj.stderr) parts.push(obj.stderr);
+      if (typeof obj.exitCode === 'number' && obj.exitCode !== 0) {
+        parts.push(`exit code: ${obj.exitCode}`);
+      }
+      if (parts.length > 0) return parts.join('\n');
+    }
+  }
+
+  if (typeof parsed === 'string') return parsed;
+  return JSON.stringify(parsed, null, 2);
+}
+
 export interface ToolCallProps extends HTMLAttributes<HTMLDivElement> {
   name: string;
   args?: Record<string, unknown>;
@@ -133,7 +166,7 @@ export const ToolCall = ({
           {args && Object.keys(args).length > 0 && (
             <div className="px-3 py-2">
               <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground/30 mb-1">Arguments</div>
-              <pre className="text-[11px] font-mono text-muted-foreground/50 whitespace-pre-wrap break-all">
+              <pre className="max-h-64 overflow-auto text-[11px] font-mono text-muted-foreground/50 whitespace-pre [overflow-wrap:normal]">
                 {JSON.stringify(args, null, 2)}
               </pre>
             </div>
@@ -174,10 +207,10 @@ export const ToolCall = ({
             <div className="px-3 py-2 border-t border-border/20">
               <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground/30 mb-1">Result</div>
               <pre className={cn(
-                'text-[11px] font-mono whitespace-pre-wrap break-all',
+                'max-h-64 overflow-auto text-[11px] font-mono whitespace-pre [overflow-wrap:normal]',
                 isError ? 'text-red-400/60' : 'text-muted-foreground/50',
               )}>
-                {typeof result === 'string' ? result : JSON.stringify(result, null, 2)}
+                {formatToolResult(result)}
               </pre>
             </div>
           )}

components/ai/AgentIconBadge.tsx

@@ -11,6 +11,7 @@ type AgentLike = {
 
 type AgentIconKey =
   | 'catty'
+  | 'copilot'
   | 'openai'
   | 'claude'
   | 'anthropic'
@@ -20,7 +21,7 @@ type AgentIconKey =
   | 'openrouter'
   | 'zed'
   | 'atom'
-| 'terminal'
+  | 'terminal'
   | 'plus';
 
 type AgentIconVisual = {
@@ -35,6 +36,11 @@ const AGENT_ICON_VISUALS: Record<AgentIconKey, AgentIconVisual> = {
     badgeClassName: 'border-violet-500/20 bg-violet-500/10',
     imageClassName: 'object-contain dark:brightness-0 dark:invert opacity-90',
   },
+  copilot: {
+    src: '/ai/agents/copilot.svg',
+    badgeClassName: 'border-zinc-300 bg-white',
+    imageClassName: 'object-contain brightness-0',
+  },
   openai: {
     src: '/ai/providers/openai.svg',
     badgeClassName: 'border-emerald-500/22 bg-emerald-500/12',
@@ -115,6 +121,9 @@ function getAgentIconKey(agent: AgentLike | 'add-more'): AgentIconKey {
   if (tokens.some((token) => token.includes('claude'))) {
     return 'claude';
   }
+  if (tokens.some((token) => token.includes('copilot'))) {
+    return 'copilot';
+  }
   if (tokens.some((token) => token.includes('anthropic'))) {
     return 'anthropic';
   }
@@ -160,7 +169,8 @@ export const AgentIconBadge: React.FC<{
   variant?: 'plain' | 'badge';
   className?: string;
 }> = ({ agent, size = 'md', variant = 'badge', className }) => {
-  const visual = AGENT_ICON_VISUALS[getAgentIconKey(agent)];
+  const iconKey = getAgentIconKey(agent);
+  const visual = AGENT_ICON_VISUALS[iconKey];
   const badgeSize =
     size === 'xs'
       ? 'h-4 w-4 rounded-sm'

components/ai/AgentSelector.tsx

@@ -9,6 +9,10 @@ import { ChevronDown, RefreshCw, Plus, Settings } from 'lucide-react';
 import React, { useCallback, useMemo, useState } from 'react';
 import { cn } from '../../lib/utils';
 import { useI18n } from '../../application/i18n/I18nProvider';
+import {
+  isSettingsManagedDiscoveredAgent,
+  matchesManagedAgentConfig,
+} from '../../infrastructure/ai/managedAgents';
 import type { AgentInfo, ExternalAgentConfig, DiscoveredAgent } from '../../infrastructure/ai/types';
 import AgentIconBadge from './AgentIconBadge';
 import {
@@ -140,7 +144,12 @@ const AgentSelector: React.FC<AgentSelectorProps> = ({
   const unconfiguredDiscovered = useMemo(
     () =>
       discoveredAgents.filter(
-        (da) => !externalAgents.some((ea) => ea.command === da.command || ea.command === da.path),
+        (da) => {
+          if (isSettingsManagedDiscoveredAgent(da)) {
+            return !externalAgents.some((ea) => matchesManagedAgentConfig(ea, da.command));
+          }
+          return !externalAgents.some((ea) => ea.command === da.command || ea.command === da.path);
+        },
       ),
     [discoveredAgents, externalAgents],
   );

components/ai/ChatInput.tsx

@@ -229,7 +229,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
             value={value}
             onChange={(e) => handleInputChange(e.target.value)}
             placeholder={placeholder || defaultPlaceholder}
-            disabled={disabled || isStreaming}
+            disabled={disabled}
             className={expanded ? 'max-h-[220px]' : undefined}
           />
           <button

components/ai/ChatMessageList.tsx

@@ -238,8 +238,13 @@ const ChatMessageList: React.FC<ChatMessageListProps> = ({ messages, isStreaming
                       </MessageResponse>
                 )}
 
-                {/* Tool calls */}
-                {message.toolCalls?.map((tc) => {
+                {/* Pending tool calls from the *last* assistant message are rendered
+                    after all tool-result messages (see below) for chronological order.
+                    Unresolved tool calls from earlier or cancelled messages are shown
+                    inline — as interrupted, or with approval controls if still pending. */}
+                {(message !== lastAssistantMessage || message.executionStatus === 'cancelled') && message.toolCalls?.filter((tc) =>
+                  !resolvedToolCallIds.has(tc.id),
+                ).map((tc) => {
                   const isPending = pendingApprovals.has(tc.id);
                   const resolved = resolvedApprovals.get(tc.id);
                   const approvalStatus = isPending
@@ -249,14 +254,12 @@ const ChatMessageList: React.FC<ChatMessageListProps> = ({ messages, isStreaming
                       : resolved === false
                         ? 'denied' as const
                         : undefined;
-
                   return (
                     <ToolCall
                       key={tc.id}
                       name={tc.name}
                       args={tc.arguments}
-                      isLoading={isThisStreaming && message.executionStatus === 'running' && !isPending}
-                      isInterrupted={message.executionStatus === 'cancelled' && !resolvedToolCallIds.has(tc.id)}
+                      isInterrupted={!isPending}
                       approvalStatus={approvalStatus}
                       onApprove={() => handleApprove(tc.id)}
                       onReject={() => handleReject(tc.id)}
@@ -290,6 +293,33 @@ const ChatMessageList: React.FC<ChatMessageListProps> = ({ messages, isStreaming
           );
         })}
 
+        {/* Pending tool calls from the last assistant message — rendered here
+            (after all tool-result messages) so they appear at the bottom. */}
+        {lastAssistantMessage?.toolCalls?.filter((tc) =>
+          !resolvedToolCallIds.has(tc.id) && lastAssistantMessage.executionStatus !== 'cancelled',
+        ).map((tc) => {
+          const isPending = pendingApprovals.has(tc.id);
+          const resolved = resolvedApprovals.get(tc.id);
+          const approvalStatus = isPending
+            ? 'pending' as const
+            : resolved === true
+              ? 'approved' as const
+              : resolved === false
+                ? 'denied' as const
+                : undefined;
+          return (
+            <ToolCall
+              key={tc.id}
+              name={tc.name}
+              args={tc.arguments}
+              isLoading={isStreaming && lastAssistantMessage.executionStatus === 'running' && !isPending}
+              approvalStatus={approvalStatus}
+              onApprove={() => handleApprove(tc.id)}
+              onReject={() => handleReject(tc.id)}
+            />
+          );
+        })}
+
         {/* Standalone MCP/ACP approval requests (not tied to SDK tool calls) */}
         {Array.from(pendingApprovals.entries())
           .filter((entry) => entry[0].startsWith('mcp_approval_') && (!activeSessionId || entry[1].chatSessionId === activeSessionId))

components/ai/hooks/useAIChatStreaming.ts

@@ -112,6 +112,13 @@ export interface PanelBridge extends NetcattyBridge {
   aiSyncProviders?: (providers: Array<{ id: string; providerId: string; apiKey?: string; baseURL?: string; enabled: boolean }>) => Promise<{ ok: boolean }>;
   aiSyncWebSearch?: (apiHost: string | null, apiKey: string | null) => Promise<{ ok: boolean }>;
   aiMcpUpdateSessions?: (sessions: TerminalSessionInfo[], chatSessionId?: string) => Promise<unknown>;
+  aiAcpListModels?: (
+    acpCommand: string,
+    acpArgs?: string[],
+    cwd?: string,
+    providerId?: string,
+    chatSessionId?: string,
+  ) => Promise<{ ok: boolean; models?: Array<{ id: string; name: string; description?: string }>; currentModelId?: string | null; error?: string }>;
   aiAcpCleanup?: (chatSessionId: string) => Promise<{ ok: boolean }>;
   [key: string]: ((...args: unknown[]) => unknown) | undefined;
 }
@@ -126,6 +133,7 @@ export interface TerminalSessionInfo {
   username?: string;
   protocol?: string;
   shellType?: string;
+  deviceType?: string;
   connected: boolean;
 }
 
@@ -688,6 +696,7 @@ export function useAIChatStreaming({
         username: s.username,
         protocol: s.protocol,
         shellType: s.shellType,
+        deviceType: s.deviceType,
         connected: s.connected,
       })),
       permissionMode: context.globalPermissionMode,

components/host-details/ChainPanel.tsx

@@ -2,14 +2,15 @@
  * Host Chain Sub-Panel
  * Panel for configuring SSH jump host chain
  */
-import { ArrowDown,Plus,X } from 'lucide-react';
-import React from 'react';
+import { ArrowDown,Plus,Search,X } from 'lucide-react';
+import React, { useMemo, useState } from 'react';
 import { useI18n } from '../../application/i18n/I18nProvider';
 import { Host } from '../../types';
 import { DistroAvatar } from '../DistroAvatar';
 import { AsidePanel } from '../ui/aside-panel';
 import { Button } from '../ui/button';
 import { Card } from '../ui/card';
+import { Input } from '../ui/input';
 import { ScrollArea } from '../ui/scroll-area';
 
 export interface ChainPanelProps {
@@ -38,6 +39,14 @@ export const ChainPanel: React.FC<ChainPanelProps> = ({
     onCancel,
 }) => {
     const { t } = useI18n();
+    const [searchQuery, setSearchQuery] = useState('');
+    const filteredHosts = useMemo(() => {
+        if (!searchQuery.trim()) return availableHostsForChain;
+        const q = searchQuery.toLowerCase();
+        return availableHostsForChain.filter(
+            (host) => host.label.toLowerCase().includes(q) || host.hostname.toLowerCase().includes(q)
+        );
+    }, [availableHostsForChain, searchQuery]);
     return (
         <AsidePanel
             open={true}
@@ -52,16 +61,7 @@ export const ChainPanel: React.FC<ChainPanelProps> = ({
             }
         >
             <ScrollArea className="flex-1">
-                <div className="p-4 space-y-4">
-                    <Card className="p-3 space-y-3 bg-card border-border/80">
-                        <p className="text-xs text-muted-foreground">
-                            {t('hostDetails.chain.desc', { host: formLabel || formHostname })}
-                        </p>
-                        <Button className="w-full h-10" onClick={() => { }}>
-                            <Plus size={14} className="mr-2" /> {t('hostDetails.chain.addHost')}
-                        </Button>
-                    </Card>
-
+                <div className="p-4 space-y-4 w-0 min-w-full">
                     {/* Chain visualization */}
                     <div className="space-y-2">
                         {chainedHosts.map((host, index) => (
@@ -73,7 +73,7 @@ export const ChainPanel: React.FC<ChainPanelProps> = ({
                                 )}
                                 <div className="flex items-center gap-2 p-2 rounded-lg border border-border/60 bg-card">
                                     <DistroAvatar host={host} fallback={host.label.slice(0, 2).toUpperCase()} className="h-8 w-8" />
-                                    <span className="text-sm font-medium flex-1">{host.label || host.hostname}</span>
+                                    <span className="text-sm font-medium flex-1 min-w-0 truncate">{host.label || host.hostname}</span>
                                     <Button
                                         variant="ghost"
                                         size="icon"
@@ -110,11 +110,20 @@ export const ChainPanel: React.FC<ChainPanelProps> = ({
                     {availableHostsForChain.length > 0 && (
                         <Card className="p-3 bg-card border-border/80">
                             <p className="text-xs font-semibold text-muted-foreground mb-2">{t('hostDetails.chain.availableHosts')}</p>
+                            <div className="relative mb-2">
+                                <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
+                                <Input
+                                    value={searchQuery}
+                                    onChange={(e) => setSearchQuery(e.target.value)}
+                                    placeholder={t('common.searchPlaceholder')}
+                                    className="h-8 pl-8 text-sm"
+                                />
+                            </div>
                             <div className="space-y-1">
-                                {availableHostsForChain.map((host) => (
+                                {filteredHosts.map((host) => (
                                     <button
                                         key={host.id}
-                                        className="w-full flex items-center gap-2 p-2 rounded-md hover:bg-secondary transition-colors text-left"
+                                        className="w-full flex items-center gap-2 p-2 rounded-md hover:bg-secondary transition-colors text-left overflow-hidden"
                                         onClick={() => onAddHost(host.id)}
                                     >
                                         <DistroAvatar host={host} fallback={host.label.slice(0, 2).toUpperCase()} className="h-8 w-8" />

components/port-forwarding/WizardContent.tsx

@@ -123,7 +123,7 @@ export const WizardContent: React.FC<WizardContentProps> = ({
                     >
                         {selectedHost ? (
                             <div className="flex items-center gap-2 w-full">
-                                <DistroAvatar host={selectedHost} fallback={selectedHost.os[0].toUpperCase()} className="h-6 w-6" />
+                                <DistroAvatar host={selectedHost} fallback={selectedHost.os[0].toUpperCase()} size="sm" />
                                 <span>{selectedHost.label}</span>
                                 <Check size={14} className="ml-auto" />
                             </div>
@@ -228,7 +228,7 @@ export const WizardContent: React.FC<WizardContentProps> = ({
                     >
                         {selectedHost ? (
                             <div className="flex items-center gap-2 w-full">
-                                <DistroAvatar host={selectedHost} fallback={selectedHost.os[0].toUpperCase()} className="h-6 w-6" />
+                                <DistroAvatar host={selectedHost} fallback={selectedHost.os[0].toUpperCase()} size="sm" />
                                 <span>{selectedHost.label}</span>
                                 <Check size={14} className="ml-auto" />
                             </div>

components/settings/ThemeSelectModal.tsx

@@ -3,55 +3,12 @@
  * A modal dialog for selecting terminal themes in settings
  */
 
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import { Check, Palette, X } from 'lucide-react';
+import { Palette, X } from 'lucide-react';
 import { useI18n } from '../../application/i18n/I18nProvider';
-import { TERMINAL_THEMES, TerminalThemeConfig } from '../../infrastructure/config/terminalThemes';
-import { useCustomThemes } from '../../application/state/customThemeStore';
 import { Button } from '../ui/button';
-import { cn } from '../../lib/utils';
-
-// Memoized theme item component to prevent unnecessary re-renders
-const ThemeItem = memo(({
-    theme,
-    isSelected,
-    onSelect
-}: {
-    theme: TerminalThemeConfig;
-    isSelected: boolean;
-    onSelect: (id: string) => void;
-}) => (
-    <button
-        onClick={() => onSelect(theme.id)}
-        className={cn(
-            'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-all',
-            isSelected
-                ? 'bg-primary/15 ring-1 ring-primary'
-                : 'hover:bg-muted'
-        )}
-    >
-        {/* Color swatch preview */}
-        <div
-            className="w-12 h-8 rounded-md flex-shrink-0 flex flex-col justify-center items-start pl-1.5 gap-0.5 border border-border/50"
-            style={{ backgroundColor: theme.colors.background }}
-        >
-            <div className="h-1 w-4 rounded-full" style={{ backgroundColor: theme.colors.green }} />
-            <div className="h-1 w-6 rounded-full" style={{ backgroundColor: theme.colors.blue }} />
-            <div className="h-1 w-3 rounded-full" style={{ backgroundColor: theme.colors.yellow }} />
-        </div>
-        <div className="flex-1 min-w-0">
-            <div className={cn('text-sm font-medium truncate', isSelected ? 'text-primary' : 'text-foreground')}>
-                {theme.name}
-            </div>
-            <div className="text-[10px] text-muted-foreground capitalize">{theme.type}</div>
-        </div>
-        {isSelected && (
-            <Check size={16} className="text-primary flex-shrink-0" />
-        )}
-    </button>
-));
-ThemeItem.displayName = 'ThemeItem';
+import { ThemeList } from '../ThemeList';
 
 interface ThemeSelectModalProps {
     open: boolean;
@@ -68,15 +25,6 @@ export const ThemeSelectModal: React.FC<ThemeSelectModalProps> = ({
 }) => {
     const { t } = useI18n();
 
-    // Group themes by type
-    const { darkThemes, lightThemes } = useMemo(() => {
-        const dark = TERMINAL_THEMES.filter(t => t.type === 'dark');
-        const light = TERMINAL_THEMES.filter(t => t.type === 'light');
-        return { darkThemes: dark, lightThemes: light };
-    }, []);
-
-    const customThemes = useCustomThemes();
-
     // Handle theme selection - select and close
     const handleThemeSelect = useCallback((themeId: string) => {
         onSelect(themeId);
@@ -134,58 +82,10 @@ export const ThemeSelectModal: React.FC<ThemeSelectModalProps> = ({
 
                 {/* Theme List */}
                 <div className="flex-1 min-h-0 overflow-y-auto p-4">
-                    {/* Dark Themes Section */}
-                    <div className="mb-4">
-                        <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-2 font-semibold px-1">
-                            {t('settings.terminal.themeModal.darkThemes')}
-                        </div>
-                        <div className="space-y-1">
-                            {darkThemes.map(theme => (
-                                <ThemeItem
-                                    key={theme.id}
-                                    theme={theme}
-                                    isSelected={selectedThemeId === theme.id}
-                                    onSelect={handleThemeSelect}
-                                />
-                            ))}
-                        </div>
-                    </div>
-
-                    {/* Light Themes Section */}
-                    <div>
-                        <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-2 font-semibold px-1">
-                            {t('settings.terminal.themeModal.lightThemes')}
-                        </div>
-                        <div className="space-y-1">
-                            {lightThemes.map(theme => (
-                                <ThemeItem
-                                    key={theme.id}
-                                    theme={theme}
-                                    isSelected={selectedThemeId === theme.id}
-                                    onSelect={handleThemeSelect}
-                                />
-                            ))}
-                        </div>
-                    </div>
-
-                    {/* Custom Themes Section */}
-                    {customThemes.length > 0 && (
-                        <div className="mt-4">
-                            <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-2 font-semibold px-1">
-                                {t('terminal.customTheme.section')}
-                            </div>
-                            <div className="space-y-1">
-                                {customThemes.map(theme => (
-                                    <ThemeItem
-                                        key={theme.id}
-                                        theme={theme}
-                                        isSelected={selectedThemeId === theme.id}
-                                        onSelect={handleThemeSelect}
-                                    />
-                                ))}
-                            </div>
-                        </div>
-                    )}
+                    <ThemeList
+                        selectedThemeId={selectedThemeId}
+                        onSelect={handleThemeSelect}
+                    />
                 </div>
 
                 {/* Footer */}

components/settings/tabs/SettingsAITab.tsx

@@ -8,7 +8,7 @@
  *   - SafetySettings
  */
 import { Bot, Globe } from "lucide-react";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type {
   AIPermissionMode,
   AIProviderId,
@@ -16,8 +16,12 @@ import type {
   ProviderConfig,
   WebSearchConfig,
 } from "../../../infrastructure/ai/types";
+import {
+  getManagedAgentStoredPath,
+  matchesManagedAgentConfig,
+  type ManagedAgentKey,
+} from "../../../infrastructure/ai/managedAgents";
 import { PROVIDER_PRESETS } from "../../../infrastructure/ai/types";
-import { useAgentDiscovery } from "../../../application/state/useAgentDiscovery";
 import { useI18n } from "../../../application/i18n/I18nProvider";
 import { TabsContent } from "../../ui/tabs";
 import { Select, SettingRow } from "../settings-ui";
@@ -38,6 +42,7 @@ import { ProviderCard } from "./ai/ProviderCard";
 import { AddProviderDropdown } from "./ai/AddProviderDropdown";
 import { CodexConnectionCard } from "./ai/CodexConnectionCard";
 import { ClaudeCodeCard } from "./ai/ClaudeCodeCard";
+import { CopilotCliCard } from "./ai/CopilotCliCard";
 import { SafetySettings } from "./ai/SafetySettings";
 import { WebSearchSettings } from "./ai/WebSearchSettings";
 
@@ -70,6 +75,54 @@ interface SettingsAITabProps {
   setWebSearchConfig: (config: WebSearchConfig | null) => void;
 }
 
+function areExternalAgentListsEqual(
+  left: ExternalAgentConfig[],
+  right: ExternalAgentConfig[],
+): boolean {
+  if (left.length !== right.length) return false;
+  return left.every((agent, index) => JSON.stringify(agent) === JSON.stringify(right[index]));
+}
+
+function buildManagedAgentState(
+  prevAgents: ExternalAgentConfig[],
+  defaultAgentId: string,
+  agentKey: ManagedAgentKey,
+  pathInfo: AgentPathInfo | null,
+): { agents: ExternalAgentConfig[]; defaultAgentId: string } {
+  const managedId = `discovered_${agentKey}`;
+  const managedAgents = prevAgents.filter((agent) => matchesManagedAgentConfig(agent, agentKey));
+  const otherAgents = prevAgents.filter((agent) => !matchesManagedAgentConfig(agent, agentKey));
+  const storedPath = getManagedAgentStoredPath(prevAgents, agentKey);
+
+  if (!pathInfo?.available || !pathInfo.path) {
+    return {
+      agents: storedPath ? prevAgents : otherAgents,
+      defaultAgentId: storedPath
+        ? defaultAgentId
+        : managedAgents.some((agent) => agent.id === defaultAgentId)
+          ? "catty"
+          : defaultAgentId,
+    };
+  }
+
+  const existingManaged = managedAgents.find((agent) => agent.id === managedId);
+  const defaults = AGENT_DEFAULTS[agentKey];
+  const nextManagedAgent: ExternalAgentConfig = {
+    ...existingManaged,
+    ...defaults,
+    id: managedId,
+    command: pathInfo.path,
+    enabled: managedAgents.length === 0 ? true : managedAgents.some((agent) => agent.enabled),
+  };
+
+  return {
+    agents: [...otherAgents, nextManagedAgent],
+    defaultAgentId: managedAgents.some((agent) => agent.id === defaultAgentId)
+      ? managedId
+      : defaultAgentId,
+  };
+}
+
 // ---------------------------------------------------------------------------
 // Main Tab Component
 // ---------------------------------------------------------------------------
@@ -113,58 +166,44 @@ const SettingsAITab: React.FC<SettingsAITabProps> = ({
   const [claudePathInfo, setClaudePathInfo] = useState<AgentPathInfo | null>(null);
   const [claudeCustomPath, setClaudeCustomPath] = useState("");
   const [isResolvingClaude, setIsResolvingClaude] = useState(false);
+  const initialManagedPathsRef = useRef<{
+    codex: string;
+    claude: string;
+    copilot: string;
+  } | null>(null);
+  if (!initialManagedPathsRef.current) {
+    initialManagedPathsRef.current = {
+      codex: getManagedAgentStoredPath(externalAgents, "codex") ?? "",
+      claude: getManagedAgentStoredPath(externalAgents, "claude") ?? "",
+      copilot: getManagedAgentStoredPath(externalAgents, "copilot") ?? "",
+    };
+  }
 
-  const {
-    discoveredAgents,
-    isDiscovering,
-    enableAgent,
-  } = useAgentDiscovery(externalAgents, setExternalAgents);
+  const [copilotPathInfo, setCopilotPathInfo] = useState<AgentPathInfo | null>(null);
+  const [copilotCustomPath, setCopilotCustomPath] = useState("");
+  const [isResolvingCopilot, setIsResolvingCopilot] = useState(false);
 
-  // Derive path info from discovery results
-  useEffect(() => {
-    if (isDiscovering) return;
+  // Ref to read current defaultAgentId without adding it as a dependency.
+  const defaultAgentIdRef = useRef(defaultAgentId);
+  defaultAgentIdRef.current = defaultAgentId;
 
-    const codex = discoveredAgents.find((a) => a.command === "codex");
-    setCodexPathInfo(
-      codex
-        ? { path: codex.path, version: codex.version, available: true }
-        : { path: null, version: null, available: false },
-    );
-
-    const claude = discoveredAgents.find((a) => a.command === "claude");
-    setClaudePathInfo(
-      claude
-        ? { path: claude.path, version: claude.version, available: true }
-        : { path: null, version: null, available: false },
-    );
-  }, [isDiscovering, discoveredAgents]);
-
-  // Auto-register discovered agents in externalAgents
-  useEffect(() => {
-    if (isDiscovering || discoveredAgents.length === 0) return;
-
-    setExternalAgents((prev) => {
-      const agentsToRegister: ExternalAgentConfig[] = [];
-
-      for (const da of discoveredAgents) {
-        if (da.command !== "codex" && da.command !== "claude") continue;
-        const agentId = `discovered_${da.command}`;
-        if (prev.some((ea) => ea.id === agentId)) continue;
-        agentsToRegister.push(enableAgent(da));
-      }
-
-      return agentsToRegister.length > 0 ? [...prev, ...agentsToRegister] : prev;
-    });
-  }, [isDiscovering, discoveredAgents, enableAgent, setExternalAgents]);
-
-  // Validate a custom path for an agent
-  const handleCheckCustomPath = useCallback(async (agentKey: "codex" | "claude") => {
+  const resolveAgentPath = useCallback(async (
+    agentKey: ManagedAgentKey,
+    customPath = "",
+  ) => {
     const bridge = getBridge();
-    if (!bridge?.aiResolveCli) return;
+    if (!bridge?.aiResolveCli) return null;
 
-    const customPath = agentKey === "codex" ? codexCustomPath : claudeCustomPath;
-    const setInfo = agentKey === "codex" ? setCodexPathInfo : setClaudePathInfo;
-    const setResolving = agentKey === "codex" ? setIsResolvingCodex : setIsResolvingClaude;
+    const setInfo = agentKey === "codex"
+      ? setCodexPathInfo
+      : agentKey === "claude"
+        ? setClaudePathInfo
+        : setCopilotPathInfo;
+    const setResolving = agentKey === "codex"
+      ? setIsResolvingCodex
+      : agentKey === "claude"
+        ? setIsResolvingClaude
+        : setIsResolvingCopilot;
 
     setResolving(true);
     try {
@@ -174,32 +213,48 @@ const SettingsAITab: React.FC<SettingsAITabProps> = ({
       });
       setInfo(result);
 
-      // Register/update in externalAgents if valid
-      if (result.available && result.path) {
-        const agentId = `discovered_${agentKey}`;
-        const defaults = AGENT_DEFAULTS[agentKey];
-        setExternalAgents((prev) => {
-          const idx = prev.findIndex((a) => a.id === agentId);
-          const config: ExternalAgentConfig = {
-            id: agentId,
-            command: result.path!,
-            enabled: true,
-            ...defaults,
-          };
-          if (idx >= 0) {
-            const updated = [...prev];
-            updated[idx] = { ...updated[idx], command: result.path! };
-            return updated;
-          }
-          return [...prev, config];
-        });
+      // Consolidate managed agent entries using the callback form of
+      // setExternalAgents so we never depend on externalAgents directly.
+      // All three agents resolve concurrently on mount — React runs
+      // state updater callbacks sequentially, so updating the ref inside
+      // ensures later calls see earlier defaultAgentId changes.
+      let nextDefaultId: string | null = null;
+      setExternalAgents((prev) => {
+        const state = buildManagedAgentState(prev, defaultAgentIdRef.current, agentKey, result);
+        if (state.defaultAgentId !== defaultAgentIdRef.current) {
+          nextDefaultId = state.defaultAgentId;
+          defaultAgentIdRef.current = state.defaultAgentId;
+        }
+        return areExternalAgentListsEqual(prev, state.agents) ? prev : state.agents;
+      });
+      if (nextDefaultId !== null) {
+        setDefaultAgentId(nextDefaultId);
       }
+
+      return result;
     } catch (err) {
       console.error("Path resolution failed:", err);
+      return null;
     } finally {
       setResolving(false);
     }
-  }, [codexCustomPath, claudeCustomPath, setExternalAgents]);
+  }, [setExternalAgents, setDefaultAgentId]);
+
+  useEffect(() => {
+    void resolveAgentPath("codex", initialManagedPathsRef.current?.codex ?? "");
+    void resolveAgentPath("claude", initialManagedPathsRef.current?.claude ?? "");
+    void resolveAgentPath("copilot", initialManagedPathsRef.current?.copilot ?? "");
+  }, [resolveAgentPath]);
+
+  // Validate a custom path for an agent
+  const handleCheckCustomPath = useCallback(async (agentKey: ManagedAgentKey) => {
+    const customPath = agentKey === "codex"
+      ? codexCustomPath
+      : agentKey === "claude"
+        ? claudeCustomPath
+        : copilotCustomPath;
+    await resolveAgentPath(agentKey, customPath);
+  }, [claudeCustomPath, codexCustomPath, copilotCustomPath, resolveAgentPath]);
 
   // Add a new provider from preset
   const handleAddProvider = useCallback(
@@ -457,7 +512,7 @@ const SettingsAITab: React.FC<SettingsAITabProps> = ({
 
             <CodexConnectionCard
               pathInfo={codexPathInfo}
-              isResolvingPath={isDiscovering || isResolvingCodex}
+              isResolvingPath={isResolvingCodex}
               customPath={codexCustomPath}
               onCustomPathChange={setCodexCustomPath}
               onRecheckPath={() => void handleCheckCustomPath("codex")}
@@ -483,13 +538,29 @@ const SettingsAITab: React.FC<SettingsAITabProps> = ({
 
             <ClaudeCodeCard
               pathInfo={claudePathInfo}
-              isResolvingPath={isDiscovering || isResolvingClaude}
+              isResolvingPath={isResolvingClaude}
               customPath={claudeCustomPath}
               onCustomPathChange={setClaudeCustomPath}
               onRecheckPath={() => void handleCheckCustomPath("claude")}
             />
           </div>
 
+          {/* -- GitHub Copilot CLI Section -- */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <ProviderIconBadge providerId="copilot" size="sm" />
+              <h3 className="text-base font-medium">{t('ai.copilot.title')}</h3>
+            </div>
+
+            <CopilotCliCard
+              pathInfo={copilotPathInfo}
+              isResolvingPath={isResolvingCopilot}
+              customPath={copilotCustomPath}
+              onCustomPathChange={setCopilotCustomPath}
+              onRecheckPath={() => void handleCheckCustomPath("copilot")}
+            />
+          </div>
+
           {/* -- Default Agent Section -- */}
           {agentOptions.length > 1 && (
             <div className="space-y-4">
@@ -507,7 +578,7 @@ const SettingsAITab: React.FC<SettingsAITabProps> = ({
                     value={defaultAgentId}
                     options={agentOptions}
                     onChange={setDefaultAgentId}
-                    className="w-48"
+                    className="w-64"
                   />
                 </SettingRow>
               </div>

components/settings/tabs/SettingsAppearanceTab.tsx

@@ -7,6 +7,8 @@ import { SUPPORTED_UI_LOCALES } from "../../../infrastructure/config/i18n";
 import { cn } from "../../../lib/utils";
 import { SectionHeader, SettingsTabContent, SettingRow, Toggle, Select } from "../settings-ui";
 import { FontSelect } from "../FontSelect";
+import { STORAGE_KEY_SHOW_RECENT_HOSTS } from "../../../infrastructure/config/storageKeys";
+import { useStoredBoolean } from "../../../application/state/useStoredBoolean";
 
 export default function SettingsAppearanceTab(props: {
   theme: "dark" | "light" | "system";
@@ -25,8 +27,6 @@ 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();
@@ -47,10 +47,13 @@ export default function SettingsAppearanceTab(props: {
     setUiLanguage,
     customCSS,
     setCustomCSS,
-    isImmersive,
-    onToggleImmersive,
   } = props;
 
+  const [showRecentHosts, setShowRecentHosts] = useStoredBoolean(
+    STORAGE_KEY_SHOW_RECENT_HOSTS,
+    true,
+  );
+
   const getHslStyle = useCallback((hsl: string) => ({ backgroundColor: `hsl(${hsl})` }), []);
 
   const hexToHsl = useCallback((hex: string) => {
@@ -258,16 +261,13 @@ export default function SettingsAppearanceTab(props: {
         </SettingRow>
       </div>
 
-      <SectionHeader title={t("settings.appearance.immersiveMode")} />
+      <SectionHeader title={t("settings.vault.title")} />
       <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")}
+          label={t('settings.vault.showRecentHosts')}
+          description={t('settings.vault.showRecentHostsDesc')}
         >
-          <Toggle
-            checked={!!isImmersive}
-            onChange={() => onToggleImmersive?.()}
-          />
+          <Toggle checked={showRecentHosts} onChange={setShowRecentHosts} />
         </SettingRow>
       </div>
 

components/settings/tabs/SettingsFileAssociationsTab.tsx

@@ -28,10 +28,12 @@ const getOpenerLabel = (
 
 export default function SettingsFileAssociationsTab() {
   const { t } = useI18n();
-  const { getAllAssociations, removeAssociation, setOpenerForExtension } = useSftpFileAssociations();
-  const { sftpDoubleClickBehavior, setSftpDoubleClickBehavior, sftpAutoSync, setSftpAutoSync, sftpShowHiddenFiles, setSftpShowHiddenFiles, sftpUseCompressedUpload, setSftpUseCompressedUpload, sftpAutoOpenSidebar, setSftpAutoOpenSidebar } = useSettingsState();
+  const { getAllAssociations, removeAssociation, setOpenerForExtension, getDefaultOpener, setDefaultOpener, removeDefaultOpener } = useSftpFileAssociations();
+  const { sftpDoubleClickBehavior, setSftpDoubleClickBehavior, sftpAutoSync, setSftpAutoSync, sftpShowHiddenFiles, setSftpShowHiddenFiles, sftpUseCompressedUpload, setSftpUseCompressedUpload, sftpAutoOpenSidebar, setSftpAutoOpenSidebar, sftpDefaultViewMode, setSftpDefaultViewMode, sftpTransferConcurrency, setSftpTransferConcurrency } = useSettingsState();
   const associations = getAllAssociations();
+  const defaultOpener = getDefaultOpener();
   const [editingExtension, setEditingExtension] = useState<string | null>(null);
+  const [isSelectingDefaultApp, setIsSelectingDefaultApp] = useState(false);
 
   const handleRemove = useCallback((extension: string) => {
     if (confirm(t('settings.sftpFileAssociations.removeConfirm', { ext: extension === 'file' ? t('sftp.opener.noExtension') : extension }))) {
@@ -39,6 +41,22 @@ export default function SettingsFileAssociationsTab() {
     }
   }, [removeAssociation, t]);
 
+  const handleSelectDefaultSystemApp = useCallback(async () => {
+    setIsSelectingDefaultApp(true);
+    try {
+      const bridge = netcattyBridge.get();
+      if (!bridge?.selectApplication) return;
+      const result = await bridge.selectApplication();
+      if (result) {
+        setDefaultOpener('system-app', { path: result.path, name: result.name });
+      }
+    } catch (e) {
+      console.error('Failed to select application:', e);
+    } finally {
+      setIsSelectingDefaultApp(false);
+    }
+  }, [setDefaultOpener]);
+
   const handleEdit = useCallback(async (extension: string) => {
     setEditingExtension(extension);
     try {
@@ -130,6 +148,76 @@ export default function SettingsFileAssociationsTab() {
           </div>
         </div>
 
+        {/* Default view mode section */}
+        <div className="space-y-4">
+          <SectionHeader title={t('settings.sftp.defaultViewMode')} />
+          <p className="text-sm text-muted-foreground">
+            {t('settings.sftp.defaultViewMode.desc')}
+          </p>
+          <div className="space-y-3">
+            <button
+              onClick={() => setSftpDefaultViewMode('list')}
+              className={cn(
+                "w-full text-left p-4 rounded-lg border-2 transition-colors",
+                sftpDefaultViewMode === 'list'
+                  ? "border-primary bg-primary/5"
+                  : "border-border hover:border-primary/50 hover:bg-secondary/50"
+              )}
+            >
+              <div className="flex items-start gap-3">
+                <div className={cn(
+                  "h-5 w-5 rounded-full border-2 flex items-center justify-center mt-0.5 shrink-0",
+                  sftpDefaultViewMode === 'list'
+                    ? "border-primary"
+                    : "border-muted-foreground/30"
+                )}>
+                  {sftpDefaultViewMode === 'list' && (
+                    <div className="h-2.5 w-2.5 rounded-full bg-primary" />
+                  )}
+                </div>
+                <div className="space-y-1">
+                  <Label className="font-medium cursor-pointer">
+                    {t('settings.sftp.defaultViewMode.list')}
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    {t('settings.sftp.defaultViewMode.listDesc')}
+                  </p>
+                </div>
+              </div>
+            </button>
+            <button
+              onClick={() => setSftpDefaultViewMode('tree')}
+              className={cn(
+                "w-full text-left p-4 rounded-lg border-2 transition-colors",
+                sftpDefaultViewMode === 'tree'
+                  ? "border-primary bg-primary/5"
+                  : "border-border hover:border-primary/50 hover:bg-secondary/50"
+              )}
+            >
+              <div className="flex items-start gap-3">
+                <div className={cn(
+                  "h-5 w-5 rounded-full border-2 flex items-center justify-center mt-0.5 shrink-0",
+                  sftpDefaultViewMode === 'tree'
+                    ? "border-primary"
+                    : "border-muted-foreground/30"
+                )}>
+                  {sftpDefaultViewMode === 'tree' && (
+                    <div className="h-2.5 w-2.5 rounded-full bg-primary" />
+                  )}
+                </div>
+                <div className="space-y-1">
+                  <Label className="font-medium cursor-pointer">
+                    {t('settings.sftp.defaultViewMode.tree')}
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    {t('settings.sftp.defaultViewMode.treeDesc')}
+                  </p>
+                </div>
+              </div>
+            </button>
+          </div>
+        </div>
+
         {/* Auto-sync section */}
         <div className="space-y-4">
           <SectionHeader title={t('settings.sftp.autoSync')} />
@@ -290,6 +378,117 @@ export default function SettingsFileAssociationsTab() {
           </button>
         </div>
 
+        {/* Transfer concurrency section */}
+        <div className="space-y-4">
+          <SectionHeader title={t('settings.sftp.transferConcurrency')} />
+          <p className="text-sm text-muted-foreground">
+            {t('settings.sftp.transferConcurrency.desc')}
+          </p>
+          <div className="flex items-center gap-3">
+            <input
+              type="range"
+              min={1}
+              max={16}
+              step={1}
+              value={sftpTransferConcurrency}
+              onChange={(e) => setSftpTransferConcurrency(Number(e.target.value))}
+              className="flex-1 accent-primary"
+            />
+            <span className="text-sm font-mono w-6 text-center">{sftpTransferConcurrency}</span>
+          </div>
+        </div>
+
+        {/* Default opener section */}
+        <div className="space-y-4">
+          <SectionHeader title={t('settings.sftp.defaultOpener')} />
+          <p className="text-sm text-muted-foreground">
+            {t('settings.sftp.defaultOpener.desc')}
+          </p>
+          <div className="space-y-3">
+            <button
+              onClick={() => removeDefaultOpener()}
+              className={cn(
+                "w-full text-left p-4 rounded-lg border-2 transition-colors",
+                !defaultOpener
+                  ? "border-primary bg-primary/5"
+                  : "border-border hover:border-primary/50 hover:bg-secondary/50"
+              )}
+            >
+              <div className="flex items-start gap-3">
+                <div className={cn(
+                  "h-5 w-5 rounded-full border-2 flex items-center justify-center mt-0.5 shrink-0",
+                  !defaultOpener ? "border-primary" : "border-muted-foreground/30"
+                )}>
+                  {!defaultOpener && <div className="h-2.5 w-2.5 rounded-full bg-primary" />}
+                </div>
+                <div className="space-y-1">
+                  <Label className="font-medium cursor-pointer">
+                    {t('settings.sftp.defaultOpener.ask')}
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    {t('settings.sftp.defaultOpener.askDesc')}
+                  </p>
+                </div>
+              </div>
+            </button>
+            <button
+              onClick={() => setDefaultOpener('builtin-editor')}
+              className={cn(
+                "w-full text-left p-4 rounded-lg border-2 transition-colors",
+                defaultOpener?.openerType === 'builtin-editor'
+                  ? "border-primary bg-primary/5"
+                  : "border-border hover:border-primary/50 hover:bg-secondary/50"
+              )}
+            >
+              <div className="flex items-start gap-3">
+                <div className={cn(
+                  "h-5 w-5 rounded-full border-2 flex items-center justify-center mt-0.5 shrink-0",
+                  defaultOpener?.openerType === 'builtin-editor' ? "border-primary" : "border-muted-foreground/30"
+                )}>
+                  {defaultOpener?.openerType === 'builtin-editor' && <div className="h-2.5 w-2.5 rounded-full bg-primary" />}
+                </div>
+                <div className="space-y-1">
+                  <Label className="font-medium cursor-pointer">
+                    {t('sftp.opener.builtInEditor')}
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    {t('settings.sftp.defaultOpener.builtInDesc')}
+                  </p>
+                </div>
+              </div>
+            </button>
+            <button
+              onClick={handleSelectDefaultSystemApp}
+              disabled={isSelectingDefaultApp}
+              className={cn(
+                "w-full text-left p-4 rounded-lg border-2 transition-colors",
+                defaultOpener?.openerType === 'system-app'
+                  ? "border-primary bg-primary/5"
+                  : "border-border hover:border-primary/50 hover:bg-secondary/50"
+              )}
+            >
+              <div className="flex items-start gap-3">
+                <div className={cn(
+                  "h-5 w-5 rounded-full border-2 flex items-center justify-center mt-0.5 shrink-0",
+                  defaultOpener?.openerType === 'system-app' ? "border-primary" : "border-muted-foreground/30"
+                )}>
+                  {defaultOpener?.openerType === 'system-app' && <div className="h-2.5 w-2.5 rounded-full bg-primary" />}
+                </div>
+                <div className="space-y-1">
+                  <Label className="font-medium cursor-pointer">
+                    {defaultOpener?.openerType === 'system-app' && defaultOpener.systemApp
+                      ? defaultOpener.systemApp.name
+                      : t('settings.sftp.defaultOpener.systemApp')}
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    {t('settings.sftp.defaultOpener.systemAppDesc')}
+                  </p>
+                </div>
+              </div>
+            </button>
+          </div>
+        </div>
+
         {/* File associations section */}
         <div className="space-y-4">
           <SectionHeader title={t('settings.sftpFileAssociations.title')} />

components/settings/tabs/SettingsTerminalTab.tsx

@@ -7,7 +7,7 @@ import type {
   TerminalEmulationType,
   TerminalSettings,
 } from "../../../domain/models";
-import { DEFAULT_KEYWORD_HIGHLIGHT_RULES } from "../../../domain/models";
+import { DEFAULT_KEYWORD_HIGHLIGHT_RULES, type KeywordHighlightRule } from "../../../domain/models";
 import { useI18n } from "../../../application/i18n/I18nProvider";
 import { MAX_FONT_SIZE, MIN_FONT_SIZE, type TerminalFont } from "../../../infrastructure/config/fonts";
 import { TERMINAL_THEMES } from "../../../infrastructure/config/terminalThemes";
@@ -15,6 +15,7 @@ import { customThemeStore, useCustomThemes } from "../../../application/state/cu
 import { parseItermcolors } from "../../../infrastructure/parsers/itermcolorsParser";
 import { cn } from "../../../lib/utils";
 import { Button } from "../../ui/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../../ui/dialog";
 import { Input } from "../../ui/input";
 import { Label } from "../../ui/label";
 import { SectionHeader, Select, SettingsTabContent, SettingRow, Toggle } from "../settings-ui";
@@ -23,6 +24,193 @@ import { TerminalFontSelect } from "../TerminalFontSelect";
 import { CustomThemeModal } from "../../terminal/CustomThemeModal";
 import type { TerminalTheme } from "../../../domain/models";
 
+// Keyword highlight rules editor for global settings
+const DEFAULT_NEW_RULE_COLOR = '#F87171';
+
+const AddCustomRuleDialog: React.FC<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  editRule?: KeywordHighlightRule | null;
+  onAdd: (rule: KeywordHighlightRule) => void;
+}> = ({ open, onOpenChange, editRule, onAdd }) => {
+  const { t } = useI18n();
+  const [label, setLabel] = useState('');
+  const [pattern, setPattern] = useState('');
+  const [color, setColor] = useState(DEFAULT_NEW_RULE_COLOR);
+  const [patternError, setPatternError] = useState<string | null>(null);
+
+  const reset = () => { setLabel(''); setPattern(''); setColor(DEFAULT_NEW_RULE_COLOR); setPatternError(null); };
+
+  // Populate form when editing
+  useEffect(() => {
+    if (open && editRule) {
+      setLabel(editRule.label);
+      setPattern(editRule.patterns[0] || '');
+      setColor(editRule.color);
+      setPatternError(null);
+    } else if (!open) {
+      reset();
+    }
+  }, [open, editRule]);
+
+  const handleSubmit = () => {
+    if (!label.trim() || !pattern.trim()) return;
+    try { new RegExp(pattern, 'gi'); } catch {
+      setPatternError(t('settings.terminal.keywordHighlight.invalidPattern'));
+      return;
+    }
+    // When editing, replace only the first pattern and keep any additional ones
+    const patterns = editRule
+      ? [pattern, ...editRule.patterns.slice(1)]
+      : [pattern];
+    onAdd({ id: editRule?.id ?? crypto.randomUUID(), label: label.trim(), patterns, color, enabled: editRule?.enabled ?? true });
+    reset();
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => { if (!v) reset(); onOpenChange(v); }}>
+      <DialogContent className="sm:max-w-[400px]">
+        <DialogHeader>
+          <DialogTitle>{editRule ? t('settings.terminal.keywordHighlight.editCustom') : t('settings.terminal.keywordHighlight.addCustom')}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-3 py-2">
+          <div className="space-y-1.5">
+            <Label className="text-xs">{t('settings.terminal.keywordHighlight.labelField')}</Label>
+            <div className="flex gap-2">
+              <Input
+                placeholder={t('settings.terminal.keywordHighlight.labelPlaceholder')}
+                value={label}
+                onChange={(e) => setLabel(e.target.value)}
+                className="flex-1"
+              />
+              <label className="relative flex-shrink-0">
+                <input type="color" value={color} onChange={(e) => setColor(e.target.value)} className="sr-only" />
+                <span className="block w-9 h-9 rounded-md cursor-pointer border border-border/50 hover:border-border" style={{ backgroundColor: color }} />
+              </label>
+            </div>
+          </div>
+          <div className="space-y-1.5">
+            <Label className="text-xs">{t('settings.terminal.keywordHighlight.patternField')}</Label>
+            <Input
+              placeholder={t('settings.terminal.keywordHighlight.patternPlaceholder')}
+              value={pattern}
+              onChange={(e) => { setPattern(e.target.value); if (patternError) setPatternError(null); }}
+              onKeyDown={(e) => { if (e.key === 'Enter') handleSubmit(); }}
+              className={cn("font-mono", patternError && "border-destructive")}
+            />
+            {patternError && <div className="text-xs text-destructive">{patternError}</div>}
+          </div>
+          {label.trim() && pattern.trim() && !patternError && (
+            <div className="flex items-center gap-2 p-2 rounded-md bg-muted/50">
+              <span className="text-xs text-muted-foreground">{t('settings.terminal.keywordHighlight.preview')}:</span>
+              <span className="text-sm font-medium" style={{ color }}>{label}</span>
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => { reset(); onOpenChange(false); }}>{t('common.cancel')}</Button>
+          <Button onClick={handleSubmit} disabled={!label.trim() || !pattern.trim()}>{editRule ? t('common.save') : t('common.add')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const KeywordHighlightRulesEditor: React.FC<{
+  rules: KeywordHighlightRule[];
+  onChange: (rules: KeywordHighlightRule[]) => void;
+}> = ({ rules, onChange }) => {
+  const { t } = useI18n();
+  const [addDialogOpen, setAddDialogOpen] = useState(false);
+  const [editingRule, setEditingRule] = useState<KeywordHighlightRule | null>(null);
+
+  const isBuiltIn = (id: string) => DEFAULT_KEYWORD_HIGHLIGHT_RULES.some((r) => r.id === id);
+
+  return (
+    <div className="space-y-2.5">
+      {rules.map((rule) => {
+        const custom = !isBuiltIn(rule.id);
+        return (
+          <div key={rule.id} className="flex items-center gap-2 group">
+            <div className="flex-1 min-w-0 flex items-center gap-1.5">
+              <span className={cn("text-sm truncate", !rule.enabled && "text-muted-foreground line-through")} style={rule.enabled ? { color: rule.color } : undefined}>
+                {rule.label}
+              </span>
+              {custom && (
+                <>
+                  <Pencil
+                    size={10}
+                    className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground cursor-pointer"
+                    onClick={() => { setEditingRule(rule); setAddDialogOpen(true); }}
+                  />
+                  <Trash2
+                    size={10}
+                    className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground cursor-pointer"
+                    onClick={() => onChange(rules.filter((r) => r.id !== rule.id))}
+                  />
+                </>
+              )}
+            </div>
+            <label className="relative flex-shrink-0">
+              <input
+                type="color"
+                value={rule.color}
+                onChange={(e) => onChange(rules.map((r) => r.id === rule.id ? { ...r, color: e.target.value } : r))}
+                className="sr-only"
+              />
+              <span
+                className="block w-8 h-5 rounded cursor-pointer border border-border/50 hover:border-border transition-colors"
+                style={{ backgroundColor: rule.color }}
+              />
+            </label>
+          </div>
+        );
+      })}
+
+      <div className="flex pt-2 mt-2 border-t border-border/50">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="flex-1 text-muted-foreground hover:text-foreground"
+          onClick={() => setAddDialogOpen(true)}
+        >
+          <Plus size={14} className="mr-1.5" />
+          {t('settings.terminal.keywordHighlight.addCustom')}
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="flex-1 text-muted-foreground hover:text-foreground"
+          onClick={() => {
+            onChange(rules.map((rule) => {
+              const def = DEFAULT_KEYWORD_HIGHLIGHT_RULES.find((r) => r.id === rule.id);
+              return def ? { ...rule, color: def.color } : rule;
+            }));
+          }}
+        >
+          <RotateCcw size={14} className="mr-1.5" />
+          {t("settings.terminal.keywordHighlight.resetColors")}
+        </Button>
+      </div>
+
+      <AddCustomRuleDialog
+        open={addDialogOpen}
+        onOpenChange={(v) => { setAddDialogOpen(v); if (!v) setEditingRule(null); }}
+        editRule={editingRule}
+        onAdd={(rule) => {
+          if (editingRule) {
+            onChange(rules.map((r) => r.id === editingRule.id ? rule : r));
+          } else {
+            onChange([...rules, rule]);
+          }
+          setEditingRule(null);
+        }}
+      />
+    </div>
+  );
+};
+
 // Theme preview button component
 const ThemePreviewButton: React.FC<{
   theme: (typeof TERMINAL_THEMES)[0];
@@ -84,6 +272,8 @@ export default function SettingsTerminalTab(props: {
     value: TerminalSettings[K],
   ) => void;
   availableFonts: TerminalFont[];
+  workspaceFocusStyle: 'dim' | 'border';
+  setWorkspaceFocusStyle: (style: 'dim' | 'border') => void;
 }) {
   const {
     terminalThemeId,
@@ -95,6 +285,8 @@ export default function SettingsTerminalTab(props: {
     terminalSettings,
     updateTerminalSetting,
     availableFonts,
+    workspaceFocusStyle,
+    setWorkspaceFocusStyle,
   } = props;
   const { t } = useI18n();
 
@@ -690,47 +882,10 @@ export default function SettingsTerminalTab(props: {
           />
         </div>
         {terminalSettings.keywordHighlightEnabled && (
-          <div className="space-y-2.5">
-            {terminalSettings.keywordHighlightRules.map((rule) => (
-              <div key={rule.id} className="flex items-center justify-between">
-                <span className="text-sm" style={{ color: rule.color }}>
-                  {rule.label}
-                </span>
-                <label className="relative">
-                  <input
-                    type="color"
-                    value={rule.color}
-                    onChange={(e) => {
-                      const newRules = terminalSettings.keywordHighlightRules.map((r) =>
-                        r.id === rule.id ? { ...r, color: e.target.value } : r,
-                      );
-                      updateTerminalSetting("keywordHighlightRules", newRules);
-                    }}
-                    className="sr-only"
-                  />
-                  <span
-                    className="block w-10 h-6 rounded-md cursor-pointer border border-border/50 hover:border-border transition-colors"
-                    style={{ backgroundColor: rule.color }}
-                  />
-                </label>
-              </div>
-            ))}
-            <Button
-              variant="ghost"
-              size="sm"
-              className="w-full mt-3 text-muted-foreground hover:text-foreground"
-              onClick={() => {
-                const resetRules = terminalSettings.keywordHighlightRules.map((rule) => {
-                  const defaultRule = DEFAULT_KEYWORD_HIGHLIGHT_RULES.find((r) => r.id === rule.id);
-                  return defaultRule ? { ...rule, color: defaultRule.color } : rule;
-                });
-                updateTerminalSetting("keywordHighlightRules", resetRules);
-              }}
-            >
-              <RotateCcw size={14} className="mr-2" />
-              {t("settings.terminal.keywordHighlight.resetColors")}
-            </Button>
-          </div>
+          <KeywordHighlightRulesEditor
+            rules={terminalSettings.keywordHighlightRules}
+            onChange={(rules) => updateTerminalSetting("keywordHighlightRules", rules)}
+          />
         )}
       </div>
 
@@ -866,6 +1021,23 @@ export default function SettingsTerminalTab(props: {
         </SettingRow>
       </div>
       {/* Autocomplete */}
+      <SectionHeader title={t("settings.terminal.section.workspaceFocus")} />
+      <div className="space-y-1">
+        <SettingRow
+          label={t("settings.terminal.workspaceFocus.style")}
+          description={t("settings.terminal.workspaceFocus.style.desc")}
+        >
+          <Select
+            value={workspaceFocusStyle}
+            onChange={(v) => setWorkspaceFocusStyle(v as 'dim' | 'border')}
+            options={[
+              { value: 'dim', label: t("settings.terminal.workspaceFocus.dim") },
+              { value: 'border', label: t("settings.terminal.workspaceFocus.border") },
+            ]}
+          />
+        </SettingRow>
+      </div>
+
       <SectionHeader title={t("settings.terminal.section.autocomplete")} />
       <div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
         <SettingRow

components/settings/tabs/ai/CopilotCliCard.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { RefreshCw } from "lucide-react";
+import { useI18n } from "../../../../application/i18n/I18nProvider";
+import { Button } from "../../../ui/button";
+import { cn } from "../../../../lib/utils";
+import type { AgentPathInfo } from "./types";
+import { ProviderIconBadge } from "./ProviderIconBadge";
+
+export const CopilotCliCard: React.FC<{
+  pathInfo: AgentPathInfo | null;
+  isResolvingPath: boolean;
+  customPath: string;
+  onCustomPathChange: (path: string) => void;
+  onRecheckPath: () => void;
+}> = ({
+  pathInfo,
+  isResolvingPath,
+  customPath,
+  onCustomPathChange,
+  onRecheckPath,
+}) => {
+  const { t } = useI18n();
+  const found = pathInfo?.available;
+
+  const statusText = isResolvingPath
+    ? t('ai.copilot.detecting')
+    : found
+      ? t('ai.copilot.detected')
+      : t('ai.copilot.notFound');
+
+  const statusClassName = isResolvingPath
+    ? "text-muted-foreground"
+    : found
+      ? "text-emerald-500"
+      : "text-amber-500";
+
+  return (
+    <div className="rounded-lg border border-border/60 bg-muted/20 p-4 space-y-3">
+      <div className="flex items-start justify-between gap-4">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <ProviderIconBadge providerId="copilot" size="sm" />
+            <span className="text-sm font-medium">{t('ai.copilot.title')}</span>
+          </div>
+          <p className="text-xs text-muted-foreground mt-2 leading-5">
+            {t('ai.copilot.description')}
+          </p>
+        </div>
+        <div className={cn("text-xs font-medium shrink-0", statusClassName)}>
+          {statusText}
+        </div>
+      </div>
+
+      {found ? (
+        <div className="flex items-center gap-2 text-xs">
+          <span className="text-muted-foreground">{t('ai.copilot.path')}</span>
+          <span className="font-mono text-foreground truncate">{pathInfo.path}</span>
+          {pathInfo.version && (
+            <>
+              <span className="text-muted-foreground">|</span>
+              <span className="text-muted-foreground">{pathInfo.version}</span>
+            </>
+          )}
+        </div>
+      ) : !isResolvingPath ? (
+        <div className="space-y-2">
+          <p className="text-xs text-amber-500">
+            {t('ai.copilot.notFoundHint')}
+          </p>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={customPath}
+              onChange={(e) => onCustomPathChange(e.target.value)}
+              placeholder={t('ai.copilot.customPathPlaceholder')}
+              className="flex-1 h-8 rounded-md border border-input bg-background px-3 text-sm font-mono placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+            <Button variant="outline" size="sm" onClick={onRecheckPath} disabled={!customPath.trim()}>
+              <RefreshCw size={14} className="mr-1.5" />
+              {t('ai.copilot.check')}
+            </Button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};

components/settings/tabs/ai/ProviderIconBadge.tsx

@@ -20,7 +20,8 @@ export const ProviderIconBadge: React.FC<{
       aria-hidden="true"
       draggable={false}
       className={cn(
-        "object-contain brightness-0 invert",
+        "object-contain",
+        providerId === "copilot" ? "brightness-0" : "brightness-0 invert",
         size === "sm" ? "w-3 h-3" : "w-4 h-4",
       )}
     />

components/settings/tabs/ai/index.ts

@@ -5,4 +5,5 @@ export { ProviderCard } from "./ProviderCard";
 export { AddProviderDropdown } from "./AddProviderDropdown";
 export { CodexConnectionCard } from "./CodexConnectionCard";
 export { ClaudeCodeCard } from "./ClaudeCodeCard";
+export { CopilotCliCard } from "./CopilotCliCard";
 export { SafetySettings } from "./SafetySettings";

components/settings/tabs/ai/types.ts

@@ -82,6 +82,13 @@ export const AGENT_DEFAULTS: Record<string, Omit<ExternalAgentConfig, "id" | "co
     acpCommand: "claude-agent-acp",
     acpArgs: [],
   },
+  copilot: {
+    name: "GitHub Copilot CLI",
+    args: ["-p", "{prompt}"],
+    icon: "copilot",
+    acpCommand: "copilot",
+    acpArgs: ["--acp", "--stdio"],
+  },
 };
 
 // ---------------------------------------------------------------------------
@@ -108,12 +115,13 @@ export function normalizeCodexBridgeError(error: unknown): string {
 // Provider icon helper
 // ---------------------------------------------------------------------------
 
-export type SettingsIconId = AIProviderId | "claude";
+export type SettingsIconId = AIProviderId | "claude" | "copilot";
 
 export const SETTINGS_ICON_PATHS: Record<SettingsIconId, string> = {
   openai: "/ai/providers/openai.svg",
   anthropic: "/ai/providers/anthropic.svg",
   claude: "/ai/agents/claude.svg",
+  copilot: "/ai/agents/copilot.svg",
   google: "/ai/providers/google.svg",
   ollama: "/ai/providers/ollama.svg",
   openrouter: "/ai/providers/openrouter.svg",
@@ -124,6 +132,7 @@ export const SETTINGS_ICON_COLORS: Record<SettingsIconId, string> = {
   openai: "bg-emerald-600",
   anthropic: "bg-orange-600",
   claude: "bg-orange-600",
+  copilot: "border border-zinc-300 bg-white",
   google: "bg-blue-600",
   ollama: "bg-purple-600",
   openrouter: "bg-pink-600",

components/sftp/SftpContext.tsx

@@ -9,37 +9,53 @@
 import React, { createContext, useContext, useMemo, useSyncExternalStore } from "react";
 import { Host, SftpFileEntry, SftpFilenameEncoding } from "../../types";
 
+export interface SftpTransferSource {
+    name: string;
+    isDirectory: boolean;
+    sourcePath?: string;
+    sourceConnectionId?: string;
+    targetPath?: string;
+}
+
 // Types for the context
 export interface SftpPaneCallbacks {
     onConnect: (host: Host | "local") => void;
     onDisconnect: () => void;
+    onPrepareSelection: () => void;
     onNavigateTo: (path: string) => void;
     onNavigateUp: () => void;
     onRefresh: () => void;
+    onRefreshTab: (tabId: string) => void;
     onSetFilenameEncoding: (encoding: SftpFilenameEncoding) => void;
-    onOpenEntry: (entry: SftpFileEntry) => void;
+    onOpenEntry: (entry: SftpFileEntry, fullPath?: string) => void;
     onToggleSelection: (fileName: string, multiSelect: boolean) => void;
     onRangeSelect: (fileNames: string[]) => void;
     onClearSelection: () => void;
     onSetFilter: (filter: string) => void;
     onCreateDirectory: (name: string) => Promise<void>;
+    onCreateDirectoryAtPath: (path: string, name: string) => Promise<void>;
     onCreateFile: (name: string) => Promise<void>;
+    onCreateFileAtPath: (path: string, name: string) => Promise<void>;
     onDeleteFiles: (fileNames: string[]) => Promise<void>;
+    onDeleteFilesAtPath: (connectionId: string, path: string, fileNames: string[]) => Promise<void>;
     onRenameFile: (oldName: string, newName: string) => Promise<void>;
-    onCopyToOtherPane: (files: { name: string; isDirectory: boolean }[]) => void;
-    onReceiveFromOtherPane: (files: { name: string; isDirectory: boolean }[]) => void;
-    onEditPermissions?: (file: SftpFileEntry) => void;
+    onRenameFileAtPath: (oldPath: string, newName: string) => Promise<void>;
+    onMoveEntriesToPath: (sourcePaths: string[], targetPath: string) => Promise<void>;
+    onCopyToOtherPane: (files: SftpTransferSource[]) => void;
+    onReceiveFromOtherPane: (files: SftpTransferSource[]) => void;
+    onEditPermissions?: (file: SftpFileEntry, fullPath?: string) => void;
     // File operations
-    onEditFile?: (entry: SftpFileEntry) => void;
-    onOpenFile?: (entry: SftpFileEntry) => void;
-    onOpenFileWith?: (entry: SftpFileEntry) => void;  // Always show opener dialog
-    onDownloadFile?: (entry: SftpFileEntry) => void;  // Download to local filesystem
+    onEditFile?: (entry: SftpFileEntry, fullPath?: string) => void;
+    onOpenFile?: (entry: SftpFileEntry, fullPath?: string) => void;
+    onOpenFileWith?: (entry: SftpFileEntry, fullPath?: string) => void;  // Always show opener dialog
+    onDownloadFile?: (entry: SftpFileEntry, fullPath?: string) => void;  // Download to local filesystem
     // External file upload (supports folders via DataTransfer)
-    onUploadExternalFiles?: (dataTransfer: DataTransfer) => Promise<void>;
+    onUploadExternalFiles?: (dataTransfer: DataTransfer, targetPath?: string) => Promise<void>;
+    onListDirectory: (path: string) => Promise<SftpFileEntry[]>;
 }
 
 export interface SftpDragCallbacks {
-    onDragStart: (files: { name: string; isDirectory: boolean }[], side: "left" | "right") => void;
+    onDragStart: (files: SftpTransferSource[], side: "left" | "right") => void;
     onDragEnd: () => void;
 }
 
@@ -91,16 +107,18 @@ export interface SftpContextValue {
     // Host updater for bookmark persistence
     updateHosts: (hosts: Host[]) => void;
 
-    // Drag state (shared between panes)
-    draggedFiles: { name: string; isDirectory: boolean; side: "left" | "right" }[] | null;
-    dragCallbacks: SftpDragCallbacks;
-
     // Callbacks for each side
     leftCallbacks: SftpPaneCallbacks;
     rightCallbacks: SftpPaneCallbacks;
 }
 
+export interface SftpDragContextValue {
+    draggedFiles: (SftpTransferSource & { side: "left" | "right" })[] | null;
+    dragCallbacks: SftpDragCallbacks;
+}
+
 const SftpContext = createContext<SftpContextValue | null>(null);
+const SftpDragContext = createContext<SftpDragContextValue | null>(null);
 
 export const useSftpContext = () => {
     const context = useContext(SftpContext);
@@ -116,13 +134,19 @@ export const useSftpPaneCallbacks = (side: "left" | "right"): SftpPaneCallbacks
     return side === "left" ? context.leftCallbacks : context.rightCallbacks;
 };
 
-// Hook to get drag-related values
+// Hook to get drag-related values (reads from separate SftpDragContext)
 export const useSftpDrag = () => {
-    const context = useSftpContext();
-    return {
-        draggedFiles: context.draggedFiles,
-        ...context.dragCallbacks,
-    };
+    const context = useContext(SftpDragContext);
+    if (!context) {
+        throw new Error("useSftpDrag must be used within SftpContextProvider");
+    }
+    return useMemo(
+        () => ({
+            draggedFiles: context.draggedFiles,
+            ...context.dragCallbacks,
+        }),
+        [context.draggedFiles, context.dragCallbacks],
+    );
 };
 
 // Hook to get hosts
@@ -140,7 +164,7 @@ export const useSftpUpdateHosts = () => {
 interface SftpContextProviderProps {
     hosts: Host[];
     updateHosts: (hosts: Host[]) => void;
-    draggedFiles: { name: string; isDirectory: boolean; side: "left" | "right" }[] | null;
+    draggedFiles: (SftpTransferSource & { side: "left" | "right" })[] | null;
     dragCallbacks: SftpDragCallbacks;
     leftCallbacks: SftpPaneCallbacks;
     rightCallbacks: SftpPaneCallbacks;
@@ -156,19 +180,29 @@ export const SftpContextProvider: React.FC<SftpContextProviderProps> = ({
     rightCallbacks,
     children,
 }) => {
-    // Memoize the context value to prevent unnecessary re-renders
-    // Note: The callbacks objects should be stable (created with useMemo in parent)
+    // Memoize the main context value (no drag state, so drag changes won't cause re-renders here)
     const value = useMemo<SftpContextValue>(
         () => ({
             hosts,
             updateHosts,
-            draggedFiles,
-            dragCallbacks,
             leftCallbacks,
             rightCallbacks,
         }),
-        [hosts, updateHosts, draggedFiles, dragCallbacks, leftCallbacks, rightCallbacks],
+        [hosts, updateHosts, leftCallbacks, rightCallbacks],
     );
 
-    return <SftpContext.Provider value={value}>{children}</SftpContext.Provider>;
+    // Memoize drag context separately so only drag consumers re-render on drag state changes
+    const dragValue = useMemo<SftpDragContextValue>(
+        () => ({
+            draggedFiles,
+            dragCallbacks,
+        }),
+        [draggedFiles, dragCallbacks],
+    );
+
+    return (
+        <SftpContext.Provider value={value}>
+            <SftpDragContext.Provider value={dragValue}>{children}</SftpDragContext.Provider>
+        </SftpContext.Provider>
+    );
 };

components/sftp/SftpFileRow.tsx

@@ -6,12 +6,13 @@ import { Folder, Link } from 'lucide-react';
 import React, { memo, useCallback } from 'react';
 import { cn } from '../../lib/utils';
 import { SftpFileEntry } from '../../types';
-import { ColumnWidths, formatBytes, formatDate, getFileIcon, isNavigableDirectory } from './utils';
+import { buildSftpColumnTemplate, ColumnWidths, formatBytes, formatDate, getFileIcon, isNavigableDirectory } from './utils';
 
 interface SftpFileRowProps {
     entry: SftpFileEntry;
     index: number;
     isSelected: boolean;
+    showSelectionHighlight: boolean;
     isDragOver: boolean;
     columnWidths: ColumnWidths;
     onSelect: (entry: SftpFileEntry, index: number, e: React.MouseEvent) => void;
@@ -27,6 +28,7 @@ const SftpFileRowInner: React.FC<SftpFileRowProps> = ({
     entry,
     index,
     isSelected,
+    showSelectionHighlight,
     isDragOver,
     columnWidths,
     onSelect,
@@ -58,10 +60,13 @@ const SftpFileRowInner: React.FC<SftpFileRowProps> = ({
     const handleDrop = useCallback((e: React.DragEvent) => {
         onDrop(entry, e);
     }, [entry, onDrop]);
+    const isSelectionVisible = isSelected && showSelectionHighlight;
 
     return (
         <div
             data-sftp-row="true"
+            data-entry-name={entry.name}
+            data-selected={isSelected ? "true" : "false"}
             draggable={!isParentDir}
             onDragStart={handleDragStart}
             onDragEnd={onDragEnd}
@@ -71,33 +76,53 @@ const SftpFileRowInner: React.FC<SftpFileRowProps> = ({
             onClick={handleSelect}
             onDoubleClick={handleOpen}
             className={cn(
-                "px-4 py-2 items-center cursor-pointer text-sm transition-colors",
-                isSelected ? "bg-primary/15 text-foreground" : "hover:bg-secondary/40",
+                "px-4 py-2 items-center cursor-pointer text-sm",
+                isSelectionVisible
+                    ? "bg-accent text-accent-foreground hover:bg-accent"
+                    : "hover:bg-accent/50",
                 isDragOver && isNavDir && "bg-primary/25 ring-1 ring-primary/50"
             )}
-            style={{ display: 'grid', gridTemplateColumns: `${columnWidths.name}% ${columnWidths.modified}% ${columnWidths.size}% ${columnWidths.type}%` }}
+            style={{ display: 'grid', gridTemplateColumns: buildSftpColumnTemplate(columnWidths) }}
         >
             <div className="flex items-center gap-3 min-w-0">
                 <div className={cn(
                     "h-7 w-7 rounded flex items-center justify-center shrink-0 relative",
-                    isNavDir ? "bg-primary/10 text-primary" : "bg-secondary/60 text-muted-foreground"
+                    isSelectionVisible
+                        ? "bg-accent-foreground/10 text-accent-foreground"
+                        : isNavDir
+                            ? "bg-primary/10 text-primary"
+                            : "bg-secondary/60 text-muted-foreground"
                 )}>
                     {isNavDir ? <Folder size={14} /> : getFileIcon(entry)}
                     {/* Show link indicator for symlinks */}
                     {entry.type === 'symlink' && (
-                        <Link size={8} className="absolute -bottom-0.5 -right-0.5 text-muted-foreground" aria-hidden="true" />
+                        <Link
+                            size={8}
+                            className={cn(
+                                "absolute -bottom-0.5 -right-0.5",
+                                isSelectionVisible ? "text-accent-foreground/80" : "text-muted-foreground",
+                            )}
+                            aria-hidden="true"
+                        />
                     )}
                 </div>
-                <span className={cn("truncate", entry.type === 'symlink' && "italic pr-1")} title={entry.name}>
+                <span
+                    className={cn(
+                        "truncate",
+                        entry.type === 'symlink' && "italic pr-1",
+                        isSelectionVisible && "font-medium",
+                    )}
+                    title={entry.name}
+                >
                     {entry.name}
                     {entry.type === 'symlink' && <span className="sr-only"> (symbolic link)</span>}
                 </span>
             </div>
-            <span className="text-xs text-muted-foreground truncate">{modifiedLabel}</span>
-            <span className="text-xs text-muted-foreground truncate text-right">
+            <span className={cn("text-xs truncate", isSelectionVisible ? "text-accent-foreground/85" : "text-muted-foreground")}>{modifiedLabel}</span>
+            <span className={cn("text-xs truncate text-right", isSelectionVisible ? "text-accent-foreground/85" : "text-muted-foreground")}>
                 {isNavDir ? '--' : sizeLabel}
             </span>
-            <span className="text-xs text-muted-foreground truncate capitalize text-right">
+            <span className={cn("text-xs truncate capitalize text-right", isSelectionVisible ? "text-accent-foreground/85" : "text-muted-foreground")}>
                 {isSymlinkToDirectory ? 'link → folder' : entry.type === 'directory' ? 'folder' : entry.type === 'symlink' ? 'link' : entry.name.split('.').pop()?.toLowerCase() || 'file'}
             </span>
         </div>
@@ -107,6 +132,8 @@ const SftpFileRowInner: React.FC<SftpFileRowProps> = ({
 const areEqual = (prev: SftpFileRowProps, next: SftpFileRowProps): boolean => {
     if (prev.index !== next.index) return false;
     if (prev.isSelected !== next.isSelected) return false;
+    // Only re-render for showSelectionHighlight changes when the row is actually selected
+    if (prev.isSelected && prev.showSelectionHighlight !== next.showSelectionHighlight) return false;
     if (prev.isDragOver !== next.isDragOver) return false;
     if (prev.columnWidths.name !== next.columnWidths.name) return false;
     if (prev.columnWidths.modified !== next.columnWidths.modified) return false;

components/sftp/SftpOverlays.tsx

@@ -24,8 +24,8 @@ interface SftpOverlaysProps {
   setHostSearchRight: (value: string) => void;
   handleHostSelectLeft: (host: Host | "local") => void;
   handleHostSelectRight: (host: Host | "local") => void;
-  permissionsState: { file: SftpFileEntry; side: "left" | "right" } | null;
-  setPermissionsState: (state: { file: SftpFileEntry; side: "left" | "right" } | null) => void;
+  permissionsState: { file: SftpFileEntry; side: "left" | "right"; fullPath: string } | null;
+  setPermissionsState: (state: { file: SftpFileEntry; side: "left" | "right"; fullPath: string } | null) => void;
   showTextEditor: boolean;
   setShowTextEditor: (open: boolean) => void;
   textEditorTarget: { file: SftpFileEntry; side: "left" | "right"; fullPath: string } | null;
@@ -43,7 +43,7 @@ interface SftpOverlaysProps {
   handleSelectSystemApp: (systemApp: { path: string; name: string }) => void;
 }
 
-export const SftpOverlays: React.FC<SftpOverlaysProps> = ({
+export const SftpOverlays: React.FC<SftpOverlaysProps> = React.memo(({
   hosts,
   sftp,
   visibleTransfers,
@@ -101,7 +101,7 @@ export const SftpOverlays: React.FC<SftpOverlaysProps> = ({
       />
 
       {showTransferQueue && (
-        <SftpTransferQueue sftp={sftp} visibleTransfers={visibleTransfers} />
+        <SftpTransferQueue sftp={sftp} visibleTransfers={visibleTransfers} allTransfers={sftp.transfers} />
       )}
 
       <SftpConflictDialog
@@ -114,17 +114,11 @@ export const SftpOverlays: React.FC<SftpOverlaysProps> = ({
         open={!!permissionsState}
         onOpenChange={(open) => !open && setPermissionsState(null)}
         file={permissionsState?.file ?? null}
-        onSave={(file, permissions) => {
+        onSave={(_file, permissions) => {
           if (permissionsState) {
-            const fullPath = sftp.joinPath(
-              permissionsState.side === "left"
-                ? sftp.leftPane.connection?.currentPath || ""
-                : sftp.rightPane.connection?.currentPath || "",
-              file.name,
-            );
             sftp.changePermissions(
               permissionsState.side,
-              fullPath,
+              permissionsState.fullPath,
               permissions,
             );
           }
@@ -160,4 +154,4 @@ export const SftpOverlays: React.FC<SftpOverlaysProps> = ({
       />
     </>
   );
-};
+});

components/sftp/SftpPaneDialogs.tsx

@@ -11,11 +11,14 @@ import {
 } from "../ui/dialog";
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
+import { getFileName, getParentPath } from "../../application/state/sftp/utils";
 import { SftpHostPicker } from "./index";
 import type { Host } from "../../types";
 
 interface SftpPaneDialogsProps {
   t: (key: string, params?: Record<string, unknown>) => string;
+  hostLabel?: string;
+  currentPath?: string;
   // New folder
   showNewFolderDialog: boolean;
   setShowNewFolderDialog: (open: boolean) => void;
@@ -61,8 +64,15 @@ interface SftpPaneDialogsProps {
   onDisconnect: () => void;
 }
 
+const HostHint: React.FC<{ label?: string }> = ({ label }) =>
+  label ? (
+    <div className="text-xs text-muted-foreground truncate mb-1">{label}</div>
+  ) : null;
+
 export const SftpPaneDialogs: React.FC<SftpPaneDialogsProps> = ({
   t,
+  hostLabel,
+  currentPath,
   showNewFolderDialog,
   setShowNewFolderDialog,
   newFolderName,
@@ -100,12 +110,36 @@ export const SftpPaneDialogs: React.FC<SftpPaneDialogsProps> = ({
   setHostSearch,
   onConnect,
   onDisconnect,
-}) => (
+}) => {
+  const isSingleDeleteTarget = deleteTargets.length === 1;
+  const deletePath = (() => {
+    if (isSingleDeleteTarget) {
+      return deleteTargets[0];
+    }
+
+    const uniquePaths = Array.from(new Set(deleteTargets.map((target) => getParentPath(target)).filter(Boolean)));
+    if (uniquePaths.length === 1) return uniquePaths[0];
+    if (uniquePaths.length > 1) return "Multiple locations";
+    return currentPath;
+  })();
+  const showDeleteList = deleteTargets.length > 1;
+  const deleteListItems = (() => {
+    if (!showDeleteList) return [];
+
+    const uniquePaths = Array.from(new Set(deleteTargets.map((target) => getParentPath(target)).filter(Boolean)));
+    if (uniquePaths.length === 1) {
+      return deleteTargets.map((target) => getFileName(target) || target);
+    }
+    return deleteTargets;
+  })();
+
+  return (
   <>
     {/* Dialogs */}
     <Dialog open={showNewFolderDialog} onOpenChange={setShowNewFolderDialog}>
       <DialogContent className="max-w-sm">
         <DialogHeader>
+          <HostHint label={hostLabel} />
           <DialogTitle>{t("sftp.newFolder")}</DialogTitle>
         </DialogHeader>
         <div className="space-y-4">
@@ -148,6 +182,7 @@ export const SftpPaneDialogs: React.FC<SftpPaneDialogsProps> = ({
     }}>
       <DialogContent className="max-w-sm">
         <DialogHeader>
+          <HostHint label={hostLabel} />
           <DialogTitle>{t("sftp.newFile")}</DialogTitle>
         </DialogHeader>
         <div className="space-y-4">
@@ -192,6 +227,7 @@ export const SftpPaneDialogs: React.FC<SftpPaneDialogsProps> = ({
     <Dialog open={showOverwriteConfirm} onOpenChange={setShowOverwriteConfirm}>
       <DialogContent className="max-w-sm">
         <DialogHeader>
+          <HostHint label={hostLabel} />
           <DialogTitle>{t("sftp.overwrite.title")}</DialogTitle>
           <DialogDescription>
             {t("sftp.overwrite.desc", { name: overwriteTarget || "" })}
@@ -217,6 +253,7 @@ export const SftpPaneDialogs: React.FC<SftpPaneDialogsProps> = ({
     <Dialog open={showRenameDialog} onOpenChange={setShowRenameDialog}>
       <DialogContent className="max-w-sm">
         <DialogHeader>
+          <HostHint label={hostLabel} />
           <DialogTitle>{t("sftp.rename.title")}</DialogTitle>
         </DialogHeader>
         <div className="space-y-4">
@@ -258,19 +295,39 @@ export const SftpPaneDialogs: React.FC<SftpPaneDialogsProps> = ({
             {t("sftp.deleteConfirm.title", { count: deleteTargets.length })}
           </DialogTitle>
           <DialogDescription>
-            {t("sftp.deleteConfirm.desc")}
+            {t(showDeleteList ? "sftp.deleteConfirm.desc" : "sftp.deleteConfirm.descSingle")}
           </DialogDescription>
         </DialogHeader>
-        <div className="max-h-32 overflow-auto text-sm space-y-1">
-          {deleteTargets.map((name) => (
-            <div
-              key={name}
-              className="flex items-center gap-2 text-muted-foreground"
-            >
-              <Trash2 size={12} />
-              <span className="truncate">{name}</span>
+        <div className="space-y-3">
+          {hostLabel || deletePath ? (
+            <div className="text-xs text-muted-foreground space-y-1.5">
+              {hostLabel ? (
+                <div className="flex items-start gap-2">
+                  <span className="font-medium text-foreground/80 shrink-0">{t("sftp.deleteConfirm.host")}:</span>
+                  <span className="break-all">{hostLabel}</span>
+                </div>
+              ) : null}
+              {deletePath ? (
+                <div className="flex items-start gap-2">
+                  <span className="font-medium text-foreground/80 shrink-0">{t("sftp.deleteConfirm.path")}:</span>
+                  <span className="break-all">{deletePath}</span>
+                </div>
+              ) : null}
             </div>
-          ))}
+          ) : null}
+          {showDeleteList ? (
+            <div className="max-h-32 overflow-auto text-sm space-y-1">
+              {deleteListItems.map((name) => (
+                <div
+                  key={name}
+                  className="flex items-center gap-2 text-muted-foreground"
+                >
+                  <Trash2 size={12} />
+                  <span className="truncate">{name}</span>
+                </div>
+              ))}
+            </div>
+          ) : null}
         </div>
         <DialogFooter>
           <Button
@@ -310,4 +367,5 @@ export const SftpPaneDialogs: React.FC<SftpPaneDialogsProps> = ({
       }}
     />
   </>
-);
+  );
+};

components/sftp/SftpPaneFileList.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useMemo, useState } from "react";
-import { ArrowDown, ChevronDown, ClipboardCopy, Copy, Download, Edit2, ExternalLink, FilePlus, Folder, FolderPlus, Loader2, Pencil, RefreshCw, Shield, Trash2, Unplug } from "lucide-react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ArrowDown, ArrowRight, ArrowUp, ChevronDown, ClipboardCopy, Copy, Download, Edit2, ExternalLink, FilePlus, Folder, FolderPlus, Loader2, Pencil, RefreshCw, Shield, Trash2, Unplug } from "lucide-react";
 import { Button } from "../ui/button";
 import {
   ContextMenu,
@@ -9,10 +9,12 @@ import {
   ContextMenuTrigger,
 } from "../ui/context-menu";
 import { cn } from "../../lib/utils";
-import { joinPath } from "../../application/state/sftp/utils";
+import { getParentPath, 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";
+import type { SftpTransferSource } from "./SftpContext";
+import { sftpListOrderStore } from "./hooks/useSftpListOrderStore";
+import { buildSftpColumnTemplate, type ColumnWidths, type SortField, type SortOrder } from "./utils";
 import { isNavigableDirectory } from "./index";
 import { isKnownBinaryFile } from "../../lib/sftpFileUtils";
 import { SftpFileRow } from "./index";
@@ -21,6 +23,7 @@ interface SftpPaneFileListProps {
   t: (key: string, params?: Record<string, unknown>) => string;
   pane: SftpPane;
   side: "left" | "right";
+  isPaneFocused: boolean;
   columnWidths: ColumnWidths;
   sortField: SortField;
   sortOrder: SortOrder;
@@ -32,8 +35,10 @@ interface SftpPaneFileListProps {
   totalHeight: number;
   sortedDisplayFiles: SftpFileEntry[];
   isDragOverPane: boolean;
-  draggedFiles: { name: string; isDirectory: boolean; side: "left" | "right" }[] | null;
+  draggedFiles: (SftpTransferSource & { side: "left" | "right" })[] | null;
   onRefresh: () => void;
+  onNavigateTo: (path: string) => void;
+  onClearSelection: () => void;
   setShowNewFolderDialog: (open: boolean) => void;
   setShowNewFileDialog: (open: boolean) => void;
   getNextUntitledName: (existingNames: string[]) => string;
@@ -48,7 +53,8 @@ interface SftpPaneFileListProps {
   handleEntryDragOver: (entry: SftpFileEntry, e: React.DragEvent) => void;
   handleRowDragLeave: () => void;
   handleEntryDrop: (entry: SftpFileEntry, e: React.DragEvent) => void;
-  onCopyToOtherPane: (files: { name: string; isDirectory: boolean }[]) => void;
+  onCopyToOtherPane: (files: SftpTransferSource[]) => void;
+  onMoveEntriesToPath: (sourcePaths: string[], targetPath: string) => Promise<void>;
   onOpenFileWith?: (entry: SftpFileEntry) => void;
   onEditFile?: (entry: SftpFileEntry) => void;
   onDownloadFile?: (entry: SftpFileEntry) => void;
@@ -99,10 +105,11 @@ const SftpErrorWithLogs: React.FC<{
   );
 };
 
-export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
+export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = React.memo(({
   t,
   pane,
   side,
+  isPaneFocused,
   columnWidths,
   sortField,
   sortOrder,
@@ -116,6 +123,8 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
   isDragOverPane,
   draggedFiles,
   onRefresh,
+  onNavigateTo,
+  onClearSelection,
   setShowNewFolderDialog,
   setShowNewFileDialog,
   getNextUntitledName,
@@ -130,6 +139,7 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
   handleRowDragLeave,
   handleEntryDrop,
   onCopyToOtherPane,
+  onMoveEntriesToPath,
   onOpenFileWith,
   onEditFile,
   onDownloadFile,
@@ -147,6 +157,39 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
     return map;
   }, [sortedDisplayFiles]);
 
+  // Push sorted file names into the list order store for keyboard navigation
+  useEffect(() => {
+    const names = sortedDisplayFiles
+      .filter((f) => f.name !== "..")
+      .map((f) => f.name);
+    sftpListOrderStore.setItems(pane.id, names);
+    return () => sftpListOrderStore.clearPane(pane.id);
+  }, [sortedDisplayFiles, pane.id]);
+
+  useEffect(() => {
+    if (pane.selectedFiles.size !== 1) return;
+    const selectedName = Array.from(pane.selectedFiles)[0];
+    if (!selectedName) return;
+
+    const container = fileListRef.current;
+    if (!container) return;
+
+    const row = Array.from(container.querySelectorAll<HTMLElement>('[data-sftp-row="true"]'))
+      .find((element) => element.dataset.entryName === selectedName);
+    row?.scrollIntoView({ block: "nearest" });
+  }, [fileListRef, pane.selectedFiles]);
+
+  // Use refs for frequently-changing values in context-menu actions
+  const selectedFilesRef = useRef(pane.selectedFiles);
+  selectedFilesRef.current = pane.selectedFiles;
+
+  const handleBackgroundClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    const target = e.target as HTMLElement;
+    if (target.closest('[data-sftp-row="true"]')) return;
+    if (pane.selectedFiles.size === 0) return;
+    onClearSelection();
+  }, [onClearSelection, pane.selectedFiles.size]);
+
   const renderRow = useCallback(
     (entry: SftpFileEntry, index: number) => (
       <ContextMenu>
@@ -155,6 +198,7 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
             entry={entry}
             index={index}
             isSelected={pane.selectedFiles.has(entry.name)}
+            showSelectionHighlight={isPaneFocused}
             isDragOver={dragOverEntry === entry.name}
             columnWidths={columnWidths}
             onSelect={handleRowSelect}
@@ -180,6 +224,11 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
                 </>
               )}
             </ContextMenuItem>
+            {isNavigableDirectory(entry) && (
+              <ContextMenuItem onClick={() => onNavigateTo(joinPath(pane.connection.currentPath, entry.name))}>
+                <ArrowRight size={14} className="mr-2" /> {t("sftp.context.navigateTo")}
+              </ContextMenuItem>
+            )}
             {!isNavigableDirectory(entry) && onOpenFileWith && (
               <ContextMenuItem onClick={() => onOpenFileWith(entry)}>
                 <ExternalLink size={14} className="mr-2" />{" "}
@@ -202,8 +251,9 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
             <ContextMenuSeparator />
             <ContextMenuItem
               onClick={() => {
-                const files = pane.selectedFiles.has(entry.name)
-                  ? Array.from(pane.selectedFiles)
+                const currentSelected = selectedFilesRef.current;
+                const files = currentSelected.has(entry.name)
+                  ? Array.from(currentSelected)
                   : [entry.name];
                 const fileData = files.map((name) => {
                   const fileName = String(name);
@@ -211,6 +261,8 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
                   return {
                     name: fileName,
                     isDirectory: file ? isNavigableDirectory(file) : false,
+                    sourceConnectionId: pane.connection?.id,
+                    sourcePath: pane.connection?.currentPath,
                   };
                 });
                 onCopyToOtherPane(fileData);
@@ -228,7 +280,27 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
               {t("sftp.context.copyPath")}
             </ContextMenuItem>
             <ContextMenuSeparator />
-            <ContextMenuItem onClick={() => openRenameDialog(entry.name)}>
+            {(() => {
+              const sourceParent = getParentPath(joinPath(pane.connection?.currentPath ?? "", entry.name));
+              const targetParent = getParentPath(sourceParent);
+              if (sourceParent === targetParent) return null;
+
+              return (
+                <ContextMenuItem
+                  onClick={() => {
+                    const currentSelected = selectedFilesRef.current;
+                    const sourcePaths = currentSelected.has(entry.name)
+                      ? Array.from(currentSelected as Set<string>).map((n) => joinPath(pane.connection?.currentPath ?? "", n))
+                      : [joinPath(pane.connection?.currentPath ?? "", entry.name)];
+                    void onMoveEntriesToPath(sourcePaths, targetParent);
+                  }}
+                >
+                  <ArrowUp size={14} className="mr-2" />{" "}
+                  {t("sftp.context.moveToParent")}
+                </ContextMenuItem>
+              );
+            })()}
+            <ContextMenuItem onClick={() => openRenameDialog(joinPath(pane.connection?.currentPath ?? "", entry.name))}>
               <Pencil size={14} className="mr-2" /> {t("common.rename")}
             </ContextMenuItem>
             {onEditPermissions && pane.connection && !pane.connection.isLocal && (
@@ -240,9 +312,10 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
             <ContextMenuItem
               className="text-destructive"
               onClick={() => {
-                const files = pane.selectedFiles.has(entry.name)
-                  ? Array.from(pane.selectedFiles)
-                  : [entry.name];
+                const currentSelected = selectedFilesRef.current;
+                const files = currentSelected.has(entry.name)
+                  ? Array.from(currentSelected as Set<string>).map((n) => joinPath(pane.connection?.currentPath ?? "", n))
+                  : [joinPath(pane.connection?.currentPath ?? "", entry.name)];
                 openDeleteConfirm(files);
               }}
             >
@@ -264,7 +337,6 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
     ),
     [
       columnWidths,
-      dragOverEntry,
       filesByName,
       handleEntryDragOver,
       handleEntryDrop,
@@ -272,11 +344,15 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
       handleRowDragLeave,
       handleRowOpen,
       handleRowSelect,
+      dragOverEntry,
+      isPaneFocused,
       onCopyToOtherPane,
+      onMoveEntriesToPath,
       onDownloadFile,
       onDragEnd,
       onEditFile,
       onEditPermissions,
+      onNavigateTo,
       onOpenFileWith,
       onRefresh,
       openDeleteConfirm,
@@ -306,7 +382,13 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
             {renderRow(entry, index)}
           </React.Fragment>
         )),
-    [renderRow, rowHeight, shouldVirtualize, sortedDisplayFiles, visibleRows],
+    [
+      renderRow,
+      rowHeight,
+      shouldVirtualize,
+      sortedDisplayFiles,
+      visibleRows,
+    ],
   );
 
   return (
@@ -316,16 +398,16 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
       className="text-[11px] uppercase tracking-wide text-muted-foreground px-4 py-2 border-b border-border/40 bg-secondary/10 select-none"
       style={{
         display: "grid",
-        gridTemplateColumns: `${columnWidths.name}% ${columnWidths.modified}% ${columnWidths.size}% ${columnWidths.type}%`,
+        gridTemplateColumns: buildSftpColumnTemplate(columnWidths),
       }}
     >
       <div
-        className="flex items-center gap-1 cursor-pointer hover:text-foreground relative pr-2"
+        className="flex min-w-0 items-center gap-1 cursor-pointer hover:text-foreground relative pr-2 overflow-hidden"
         onClick={() => handleSort("name")}
       >
-        <span>{t("sftp.columns.name")}</span>
+        <span className="truncate whitespace-nowrap">{t("sftp.columns.name")}</span>
         {sortField === "name" && (
-          <span className="text-primary">
+          <span className="shrink-0 text-primary">
             {sortOrder === "asc" ? "↑" : "↓"}
           </span>
         )}
@@ -335,12 +417,12 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
         />
       </div>
       <div
-        className="flex items-center gap-1 cursor-pointer hover:text-foreground relative pr-2"
+        className="flex min-w-0 items-center gap-1 cursor-pointer hover:text-foreground relative pr-2 overflow-hidden"
         onClick={() => handleSort("modified")}
       >
-        <span>{t("sftp.columns.modified")}</span>
+        <span className="truncate whitespace-nowrap">{t("sftp.columns.modified")}</span>
         {sortField === "modified" && (
-          <span className="text-primary">
+          <span className="shrink-0 text-primary">
             {sortOrder === "asc" ? "↑" : "↓"}
           </span>
         )}
@@ -350,30 +432,30 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
         />
       </div>
       <div
-        className="flex items-center gap-1 cursor-pointer hover:text-foreground relative pr-2 justify-end"
+        className="flex min-w-0 items-center gap-1 cursor-pointer hover:text-foreground relative pr-2 justify-end overflow-hidden"
         onClick={() => handleSort("size")}
       >
         {sortField === "size" && (
-          <span className="text-primary">
+          <span className="shrink-0 text-primary">
             {sortOrder === "asc" ? "↑" : "↓"}
           </span>
         )}
-        <span>{t("sftp.columns.size")}</span>
+        <span className="truncate whitespace-nowrap">{t("sftp.columns.size")}</span>
         <div
           className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/50 transition-colors"
           onMouseDown={(e) => handleResizeStart("size", e)}
         />
       </div>
       <div
-        className="flex items-center gap-1 cursor-pointer hover:text-foreground justify-end"
+        className="flex min-w-0 items-center gap-1 cursor-pointer hover:text-foreground justify-end overflow-hidden"
         onClick={() => handleSort("type")}
       >
         {sortField === "type" && (
-          <span className="text-primary">
+          <span className="shrink-0 text-primary">
             {sortOrder === "asc" ? "↑" : "↓"}
           </span>
         )}
-        <span>{t("sftp.columns.kind")}</span>
+        <span className="truncate whitespace-nowrap">{t("sftp.columns.kind")}</span>
       </div>
     </div>
 
@@ -386,6 +468,7 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
             "flex-1 min-h-0 overflow-y-auto relative",
             isDragOverPane && "ring-2 ring-primary/30 ring-inset",
           )}
+          onClick={handleBackgroundClick}
           onScroll={handleFileListScroll}
         >
           {pane.loading && sortedDisplayFiles.length === 0 ? (
@@ -457,7 +540,7 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
     <div className="h-9 shrink-0 px-4 flex items-center justify-between text-[11px] text-muted-foreground border-t border-border/40 bg-secondary/30">
       <span>
         {t("sftp.itemsCount", {
-          count: sortedDisplayFiles.filter((f) => f.name !== "..").length,
+          count: sortedDisplayFiles.length - (sortedDisplayFiles[0]?.name === ".." ? 1 : 0),
         })}
         {pane.selectedFiles.size > 0 &&
           ` - ${t("sftp.selectedCount", { count: pane.selectedFiles.size })}`}
@@ -497,4 +580,4 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
     )}
   </>
 );
-};
+});

components/sftp/SftpPaneToolbar.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { Bookmark, Check, Eye, EyeOff, FilePlus, Folder, FolderPlus, Globe, Home, Languages, MoreHorizontal, RefreshCw, Search, TerminalSquare, Trash2, X } from "lucide-react";
+import { Bookmark, Check, Eye, EyeOff, FilePlus, Folder, FolderPlus, Globe, Home, Languages, List, ListTree, MoreHorizontal, RefreshCw, Search, TerminalSquare, Trash2, X } from "lucide-react";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Popover, PopoverClose, PopoverContent, PopoverTrigger } from "../ui/popover";
@@ -53,6 +53,8 @@ interface SftpPaneToolbarProps {
   showHiddenFiles: boolean;
   onToggleShowHiddenFiles?: () => void;
   onGoToTerminalCwd?: () => void;
+  viewMode: 'list' | 'tree';
+  onSetViewMode: (mode: 'list' | 'tree') => void;
 }
 
 // Prioritize breadcrumb path display. 6 action buttons need ~156px,
@@ -60,7 +62,7 @@ interface SftpPaneToolbarProps {
 // always gets at least ~200px of space.
 const COLLAPSE_WIDTH = 400;
 
-export const SftpPaneToolbar: React.FC<SftpPaneToolbarProps> = ({
+export const SftpPaneToolbar: React.FC<SftpPaneToolbarProps> = React.memo(({
   t,
   pane,
   onNavigateTo,
@@ -101,9 +103,22 @@ export const SftpPaneToolbar: React.FC<SftpPaneToolbarProps> = ({
   showHiddenFiles,
   onToggleShowHiddenFiles,
   onGoToTerminalCwd,
+  viewMode,
+  onSetViewMode,
 }) => {
   const outerRef = useRef<HTMLDivElement>(null);
   const [collapsed, setCollapsed] = useState(false);
+  const [displayPath, setDisplayPath] = useState(pane.connection?.currentPath ?? "");
+  const prevDisplayConnectionIdRef = useRef(pane.connection?.id);
+
+  useEffect(() => {
+    const connectionChanged = pane.connection?.id !== prevDisplayConnectionIdRef.current;
+    prevDisplayConnectionIdRef.current = pane.connection?.id;
+    // Sync immediately on connection change; otherwise defer until loading completes
+    if (connectionChanged || !pane.loading) {
+      setDisplayPath(pane.connection?.currentPath ?? "");
+    }
+  }, [pane.connection?.currentPath, pane.connection?.id, pane.loading]);
 
   // Observe the overall toolbar width to decide whether to collapse action buttons
   useEffect(() => {
@@ -157,6 +172,36 @@ export const SftpPaneToolbar: React.FC<SftpPaneToolbarProps> = ({
           <TooltipContent>{t("sftp.goToTerminalCwd")}</TooltipContent>
         </Tooltip>
       )}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className={cn("h-6 w-6", viewMode === 'list' && "bg-secondary text-foreground")}
+            aria-pressed={viewMode === 'list'}
+            aria-label={t('sftp.viewMode.list')}
+            onClick={() => onSetViewMode('list')}
+          >
+            <List size={14} />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{t('sftp.viewMode.list')}</TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className={cn("h-6 w-6", viewMode === 'tree' && "bg-secondary text-foreground")}
+            aria-pressed={viewMode === 'tree'}
+            aria-label={t('sftp.viewMode.tree')}
+            onClick={() => onSetViewMode('tree')}
+          >
+            <ListTree size={14} />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{t('sftp.viewMode.tree')}</TooltipContent>
+      </Tooltip>
       <Tooltip>
         <TooltipTrigger asChild>
           <Button
@@ -279,6 +324,32 @@ export const SftpPaneToolbar: React.FC<SftpPaneToolbarProps> = ({
   // Overflow dropdown menu items (same collapsible actions as menu items)
   const overflowMenuItems = (
     <div className="flex flex-col min-w-[140px]">
+      <div role="radiogroup" aria-label={t('sftp.viewMode.label')}>
+        <button
+          className={cn(
+            "flex items-center gap-2 px-2 py-1.5 text-xs rounded-sm hover:bg-secondary transition-colors w-full text-left",
+            viewMode === 'list' && "text-primary"
+          )}
+          role="radio"
+          aria-checked={viewMode === 'list'}
+          onClick={() => onSetViewMode('list')}
+        >
+          <List size={14} className="shrink-0" />
+          {t('sftp.viewMode.list')}
+        </button>
+        <button
+          className={cn(
+            "flex items-center gap-2 px-2 py-1.5 text-xs rounded-sm hover:bg-secondary transition-colors w-full text-left",
+            viewMode === 'tree' && "text-primary"
+          )}
+          role="radio"
+          aria-checked={viewMode === 'tree'}
+          onClick={() => onSetViewMode('tree')}
+        >
+          <ListTree size={14} className="shrink-0" />
+          {t('sftp.viewMode.tree')}
+        </button>
+      </div>
       {isRemote && (
         <Popover>
           <PopoverTrigger asChild>
@@ -410,7 +481,7 @@ export const SftpPaneToolbar: React.FC<SftpPaneToolbarProps> = ({
             title={t("sftp.path.doubleClickToEdit")}
           >
             <SftpBreadcrumb
-              path={pane.connection.currentPath}
+              path={displayPath}
               onNavigate={onNavigateTo}
               onHome={() =>
                 pane.connection?.homeDir &&
@@ -600,4 +671,4 @@ export const SftpPaneToolbar: React.FC<SftpPaneToolbarProps> = ({
       )}
     </TooltipProvider>
   );
-};
+});

components/sftp/SftpPaneView.tsx

@@ -7,6 +7,7 @@ import { SftpPaneDialogs } from "./SftpPaneDialogs";
 import { SftpPaneEmptyState } from "./SftpPaneEmptyState";
 import { SftpPaneFileList } from "./SftpPaneFileList";
 import { SftpPaneToolbar } from "./SftpPaneToolbar";
+import { SftpPaneTreeView } from "./SftpPaneTreeView";
 import {
   useActiveTabId,
   useSftpDrag,
@@ -15,6 +16,7 @@ import {
   useSftpUpdateHosts,
 } from "./index";
 import type { SftpPane } from "../../application/state/sftp/types";
+import { joinPath } from "../../application/state/sftp/utils";
 import type { Host } from "../../domain/models";
 import { useSftpPaneDialogs } from "./hooks/useSftpPaneDialogs";
 import { useSftpPaneDragAndSelect } from "./hooks/useSftpPaneDragAndSelect";
@@ -26,6 +28,15 @@ import { useSftpDialogActionHandler } from "./hooks/useSftpDialogAction";
 import { useSftpBookmarks } from "./hooks/useSftpBookmarks";
 import { useLocalSftpBookmarks } from "./hooks/useLocalSftpBookmarks";
 import { useGlobalSftpBookmarks } from "./hooks/useGlobalSftpBookmarks";
+import { useSftpHostViewMode } from "./hooks/useSftpHostViewMode";
+import { sftpListOrderStore } from "./hooks/useSftpListOrderStore";
+import { sftpTreeSelectionStore } from "./hooks/useSftpTreeSelectionStore";
+
+interface TreeReloadRequest {
+  token: number;
+  paths?: string[];
+  full?: boolean;
+}
 
 interface SftpPaneWrapperProps {
   side: "left" | "right";
@@ -56,31 +67,66 @@ SftpPaneWrapper.displayName = "SftpPaneWrapper";
 interface SftpPaneViewProps {
   side: "left" | "right";
   pane: SftpPane;
+  dialogActionScopeId: string;
+  isPaneFocused: boolean;
+  sftpDefaultViewMode: 'list' | 'tree';
   showHeader?: boolean;
   showEmptyHeader?: boolean;
   onToggleShowHiddenFiles?: () => void;
   onGoToTerminalCwd?: () => void;
+  /** When true, treat this pane as always active (used by SftpSidePanel which manages visibility itself) */
+  forceActive?: boolean;
 }
 
 const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
   side,
   pane,
+  dialogActionScopeId,
+  isPaneFocused,
+  sftpDefaultViewMode,
   showHeader = true,
   showEmptyHeader = true,
   onToggleShowHiddenFiles,
   onGoToTerminalCwd,
+  forceActive,
 }) => {
-  const isActive = true;
+  const activeTabId = useActiveTabId(side);
+  const isActive = forceActive || (activeTabId ? pane.id === activeTabId : true);
 
   const callbacks = useSftpPaneCallbacks(side);
   const { draggedFiles, onDragStart, onDragEnd } = useSftpDrag();
   const hosts = useSftpHosts();
 
   const { t } = useI18n();
+  const hostId = pane.connection?.hostId;
+  const { hostViewMode, setHostViewMode: saveHostViewMode } = useSftpHostViewMode(hostId);
   const [, startTransition] = useTransition();
   const [showFilterBar, setShowFilterBar] = useState(false);
+  const initialViewMode = hostViewMode ?? sftpDefaultViewMode ?? 'list';
+  const [viewMode, setViewMode] = useState<'list' | 'tree'>(initialViewMode);
+  const [treeReloadRequest, setTreeReloadRequest] = useState<TreeReloadRequest>({ token: 0, full: true });
+  // Lazy-mount: only render the tree component once tree mode has been activated
+  const [treeEverMounted, setTreeEverMounted] = useState(initialViewMode === 'tree');
+  useEffect(() => {
+    if (viewMode === 'tree' && !treeEverMounted) setTreeEverMounted(true);
+  }, [viewMode, treeEverMounted]);
   const filterInputRef = useRef<HTMLInputElement>(null);
 
+  const requestTreeReload = useCallback((paths?: string[], full = false) => {
+    setTreeReloadRequest((prev) => ({
+      token: prev.token + 1,
+      paths,
+      full,
+    }));
+  }, []);
+
+  const requestNestedTreeReload = useCallback((paths?: string[]) => {
+    const targets = Array.from(new Set((paths ?? []).filter(Boolean)));
+    if (targets.length > 0) {
+      requestTreeReload(targets);
+    }
+  }, [requestTreeReload]);
+
   useRenderTracker(`SftpPaneView[${side}]`, {
     side,
     paneId: pane.id,
@@ -141,11 +187,12 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
     [hostBookmarks, globalBookmarks],
   );
 
-  const { filteredFiles, sortedDisplayFiles } = useSftpPaneFiles({
+  const { sortedDisplayFiles } = useSftpPaneFiles({
     files: pane.files,
     filter: pane.filter,
     connection: pane.connection,
     showHiddenFiles: pane.showHiddenFiles,
+    enableListView: viewMode === 'list',
     sortField,
     sortOrder,
   });
@@ -166,7 +213,8 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
     handlePathSubmit,
   } = useSftpPanePath({
     connection: pane.connection,
-    filteredFiles,
+    files: pane.files,
+    showHiddenFiles: pane.showHiddenFiles,
     onNavigateTo: callbacks.onNavigateTo,
   });
   const {
@@ -204,6 +252,8 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
     handleConfirmOverwrite,
     handleRename,
     handleDelete,
+    openNewFolderDialogAtPath,
+    openNewFileDialogAtPath,
     openRenameDialog,
     openDeleteConfirm,
     getNextUntitledName,
@@ -211,11 +261,25 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
     t,
     pane,
     onCreateDirectory: callbacks.onCreateDirectory,
+    onCreateDirectoryAtPath: callbacks.onCreateDirectoryAtPath,
     onCreateFile: callbacks.onCreateFile,
-    onRenameFile: callbacks.onRenameFile,
-    onDeleteFiles: callbacks.onDeleteFiles,
+    onCreateFileAtPath: callbacks.onCreateFileAtPath,
+    onRenameFileAtPath: callbacks.onRenameFileAtPath,
+    onDeleteFilesAtPath: callbacks.onDeleteFilesAtPath,
     onClearSelection: callbacks.onClearSelection,
+    onMutateSuccess: (paths?: string[]) => requestNestedTreeReload(paths),
   });
+  const handleUploadExternalFiles = useCallback(async (dataTransfer: DataTransfer, targetPath?: string) => {
+    await callbacks.onUploadExternalFiles?.(dataTransfer, targetPath);
+    const affectedPath = targetPath ?? pane.connection?.currentPath;
+    if (affectedPath && affectedPath !== pane.connection?.currentPath) {
+      requestTreeReload([affectedPath]);
+    }
+  }, [callbacks, pane.connection?.currentPath, requestTreeReload]);
+
+  const handleMoveEntriesToPath = useCallback(async (sourcePaths: string[], targetPath: string) => {
+    await callbacks.onMoveEntriesToPath(sourcePaths, targetPath);
+  }, [callbacks]);
   const {
     dragOverEntry,
     isDragOverPane,
@@ -236,7 +300,8 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
     draggedFiles,
     onDragStart,
     onReceiveFromOtherPane: callbacks.onReceiveFromOtherPane,
-    onUploadExternalFiles: callbacks.onUploadExternalFiles,
+    onMoveEntriesToPath: callbacks.onMoveEntriesToPath,
+    onUploadExternalFiles: handleUploadExternalFiles,
     onOpenEntry: callbacks.onOpenEntry,
     onRangeSelect: callbacks.onRangeSelect,
     onToggleSelection: callbacks.onToggleSelection,
@@ -250,14 +315,26 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
     visibleRows,
   } = useSftpPaneVirtualList({
     isActive,
+    enabled: viewMode === 'list',
     sortedDisplayFiles,
   });
 
+  const toFullPath = useCallback(
+    (target: string) => {
+      const currentPath = pane.connection?.currentPath;
+      if (!currentPath || target.includes("/") || target.includes("\\")) {
+        return target;
+      }
+      return joinPath(currentPath, target);
+    },
+    [pane.connection?.currentPath],
+  );
+
   // Handle keyboard shortcut dialog actions
   const dialogActionHandlers = useMemo(
     () => ({
-      onRename: (fileName: string) => openRenameDialog(fileName),
-      onDelete: (fileNames: string[]) => openDeleteConfirm(fileNames),
+      onRename: (fileName: string) => openRenameDialog(toFullPath(fileName)),
+      onDelete: (fileNames: string[]) => openDeleteConfirm(fileNames.map(toFullPath)),
       onNewFolder: () => {
         setNewFolderName("");
         setShowNewFolderDialog(true);
@@ -274,6 +351,7 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
       openDeleteConfirm,
       openRenameDialog,
       pane.files,
+      toFullPath,
       setFileNameError,
       setNewFileName,
       setNewFolderName,
@@ -282,12 +360,51 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
     ],
   );
 
-  useSftpDialogActionHandler(side, dialogActionHandlers);
+  useSftpDialogActionHandler(side, dialogActionScopeId, dialogActionHandlers, isActive);
 
   const handleSortWithTransition = (field: typeof sortField) => {
     startTransition(() => handleSort(field));
   };
 
+  const handleRefresh = useCallback(() => {
+    callbacks.onRefresh();
+    if (viewMode === 'tree') {
+      requestTreeReload(undefined, true);
+    }
+  }, [callbacks, requestTreeReload, viewMode]);
+
+  const onSetFilterRef = useRef(callbacks.onSetFilter);
+  onSetFilterRef.current = callbacks.onSetFilter;
+  const onClearSelectionRef = useRef(callbacks.onClearSelection);
+  onClearSelectionRef.current = callbacks.onClearSelection;
+
+  const handleSetViewMode = useCallback((mode: 'list' | 'tree') => {
+    setViewMode(mode);
+    saveHostViewMode(mode);
+    if (mode === 'tree') {
+      setShowFilterBar(false);
+      onSetFilterRef.current('');
+      onClearSelectionRef.current();
+    }
+  }, [saveHostViewMode]);
+
+  useEffect(() => {
+    if (viewMode === 'list') {
+      sftpTreeSelectionStore.clearPane(pane.id);
+      return;
+    }
+    sftpListOrderStore.clearPane(pane.id);
+  }, [pane.id, viewMode]);
+
+  // When connecting to a host, restore its saved view mode preference
+  const prevHostIdRef = useRef<string | undefined>(undefined);
+  useEffect(() => {
+    if (hostId && hostId !== prevHostIdRef.current) {
+      setViewMode(hostViewMode ?? sftpDefaultViewMode);
+    }
+    prevHostIdRef.current = hostId;
+  }, [hostId, hostViewMode, sftpDefaultViewMode]);
+
   useEffect(() => {
     logger.debug("SftpPaneView active state", {
       side,
@@ -296,6 +413,17 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
     });
   }, [isActive, pane.id, side]);
 
+  const lastHandledTransferMutationTokenRef = useRef(0);
+  useEffect(() => {
+    if (!pane.connection || pane.transferMutationToken === 0) return;
+    if (pane.transferMutationToken === lastHandledTransferMutationTokenRef.current) return;
+    lastHandledTransferMutationTokenRef.current = pane.transferMutationToken;
+    callbacks.onRefreshTab(pane.id);
+    if (viewMode === 'tree') {
+      requestTreeReload(undefined, true);
+    }
+  }, [callbacks, pane.connection, pane.id, pane.transferMutationToken, requestTreeReload, viewMode]);
+
   if (!pane.connection) {
     return (
       <SftpPaneEmptyState
@@ -329,7 +457,7 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
         onNavigateTo={callbacks.onNavigateTo}
         onSetFilter={callbacks.onSetFilter}
         onSetFilenameEncoding={callbacks.onSetFilenameEncoding}
-        onRefresh={callbacks.onRefresh}
+        onRefresh={handleRefresh}
         showFilterBar={showFilterBar}
         setShowFilterBar={setShowFilterBar}
         filterInputRef={filterInputRef}
@@ -364,12 +492,51 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
         showHiddenFiles={pane.showHiddenFiles}
         onToggleShowHiddenFiles={onToggleShowHiddenFiles}
         onGoToTerminalCwd={onGoToTerminalCwd}
+        viewMode={viewMode}
+        onSetViewMode={handleSetViewMode}
       />
 
+      {treeEverMounted && (
+        <div className={viewMode === 'tree' ? 'flex-1 min-h-0 flex flex-col' : 'hidden'}>
+          <SftpPaneTreeView
+            pane={pane}
+            side={side}
+            onPrepareSelection={callbacks.onPrepareSelection}
+            onLoadChildren={callbacks.onListDirectory}
+            onMoveEntriesToPath={handleMoveEntriesToPath}
+            onNavigateUp={callbacks.onNavigateUp}
+            onNavigateTo={callbacks.onNavigateTo}
+            onRefresh={handleRefresh}
+            onOpenEntry={callbacks.onOpenEntry}
+            onDragStart={onDragStart}
+            onDragEnd={onDragEnd}
+            openRenameDialog={openRenameDialog}
+            openDeleteConfirm={openDeleteConfirm}
+            onCopyToOtherPane={callbacks.onCopyToOtherPane}
+            onReceiveFromOtherPane={callbacks.onReceiveFromOtherPane}
+            onOpenFileWith={callbacks.onOpenFileWith}
+            onEditFile={callbacks.onEditFile}
+            onDownloadFile={callbacks.onDownloadFile}
+            onEditPermissions={callbacks.onEditPermissions}
+            draggedFiles={draggedFiles}
+            openNewFolderDialog={openNewFolderDialogAtPath}
+            openNewFileDialog={openNewFileDialogAtPath}
+            onUploadExternalFiles={handleUploadExternalFiles}
+            columnWidths={columnWidths}
+            handleSort={handleSortWithTransition}
+            handleResizeStart={handleResizeStart}
+            sortField={sortField}
+            sortOrder={sortOrder}
+            reloadRequest={treeReloadRequest}
+          />
+        </div>
+      )}
+      <div className={viewMode === 'list' ? 'flex-1 min-h-0 flex flex-col' : 'hidden'}>
       <SftpPaneFileList
         t={t}
         pane={pane}
         side={side}
+        isPaneFocused={isPaneFocused}
         columnWidths={columnWidths}
         sortField={sortField}
         sortOrder={sortOrder}
@@ -382,7 +549,9 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
         sortedDisplayFiles={sortedDisplayFiles}
         isDragOverPane={isDragOverPane}
         draggedFiles={draggedFiles}
-        onRefresh={callbacks.onRefresh}
+        onRefresh={handleRefresh}
+        onNavigateTo={callbacks.onNavigateTo}
+        onClearSelection={callbacks.onClearSelection}
         setShowNewFolderDialog={setShowNewFolderDialog}
         setShowNewFileDialog={setShowNewFileDialog}
         getNextUntitledName={getNextUntitledName}
@@ -397,6 +566,7 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
         handleRowDragLeave={handleRowDragLeave}
         handleEntryDrop={handleEntryDrop}
         onCopyToOtherPane={callbacks.onCopyToOtherPane}
+        onMoveEntriesToPath={handleMoveEntriesToPath}
         onOpenFileWith={callbacks.onOpenFileWith}
         onEditFile={callbacks.onEditFile}
         onDownloadFile={callbacks.onDownloadFile}
@@ -406,9 +576,12 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
         rowHeight={rowHeight}
         visibleRows={visibleRows}
       />
+      </div>
 
       <SftpPaneDialogs
         t={t}
+        hostLabel={pane.connection?.hostLabel}
+        currentPath={pane.connection?.currentPath}
         showNewFolderDialog={showNewFolderDialog}
         setShowNewFolderDialog={setShowNewFolderDialog}
         newFolderName={newFolderName}
@@ -457,8 +630,11 @@ const sftpPaneViewAreEqual = (
 ): boolean => {
   if (prev.pane !== next.pane) return false;
   if (prev.side !== next.side) return false;
+  if (prev.dialogActionScopeId !== next.dialogActionScopeId) return false;
+  if (prev.isPaneFocused !== next.isPaneFocused) return false;
   if (prev.showHeader !== next.showHeader) return false;
   if (prev.showEmptyHeader !== next.showEmptyHeader) return false;
+  if (prev.sftpDefaultViewMode !== next.sftpDefaultViewMode) return false;
 
   return true;
 };

components/sftp/SftpTabBar.tsx

@@ -147,7 +147,8 @@ const SftpTabBarInner: React.FC<SftpTabBarProps> = ({
         container.scrollLeft += tabRect.right - containerRect.right + 8;
       }
     }
-    setTimeout(updateScrollState, 100);
+    const timer = setTimeout(updateScrollState, 100);
+    return () => clearTimeout(timer);
   }, [activeTabId, updateScrollState]);
 
   // Drag handlers
@@ -213,6 +214,22 @@ const SftpTabBarInner: React.FC<SftpTabBarProps> = ({
     [onCloseTab],
   );
 
+  const handleSelectTabClick = useCallback(
+    (e: React.MouseEvent, tabId: string) => {
+      e.stopPropagation();
+      onSelectTab(tabId);
+    },
+    [onSelectTab],
+  );
+
+  const handleAddTabClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onAddTab();
+    },
+    [onAddTab],
+  );
+
   // Cross-pane drag handlers
   const handleCrossPaneDragOver = useCallback(
     (e: React.DragEvent) => {
@@ -301,7 +318,7 @@ const SftpTabBarInner: React.FC<SftpTabBarProps> = ({
               <div
                 key={tab.id}
                 data-tab-id={tab.id}
-                onClick={() => onSelectTab(tab.id)}
+                onClick={(e) => handleSelectTabClick(e, tab.id)}
                 draggable
                 onDragStart={(e) => handleTabDragStart(e, tab.id)}
                 onDragEnd={handleTabDragEnd}
@@ -378,7 +395,7 @@ const SftpTabBarInner: React.FC<SftpTabBarProps> = ({
       {/* Add tab button */}
       <button
         className="px-2 flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-[linear-gradient(135deg,_hsl(var(--accent)_/_0.18),_hsl(var(--primary)_/_0.18))] transition-all duration-150 border-l border-border/40 cursor-pointer"
-        onClick={onAddTab}
+        onClick={handleAddTabClick}
         title={t("sftp.tabs.addTab")}
       >
         <Plus size={14} />
@@ -417,4 +434,3 @@ const sftpTabBarAreEqual = (
 
 export const SftpTabBar = memo(SftpTabBarInner, sftpTabBarAreEqual);
 SftpTabBar.displayName = "SftpTabBar";
-

components/sftp/SftpTransferItem.tsx

@@ -4,237 +4,375 @@
 
 import {
     ArrowDown,
+    ArrowRight,
     CheckCircle2,
+    ChevronDown,
+    ChevronUp,
+    File,
     FolderUp,
+    GripVertical,
     Loader2,
     RefreshCw,
     X,
     XCircle,
 } from 'lucide-react';
 import React, { memo } from 'react';
-import { getParentPath } from '../../application/state/sftp/utils';
 import { useI18n } from '../../application/i18n/I18nProvider';
+import { getParentPath } from '../../application/state/sftp/utils';
 import { cn } from '../../lib/utils';
 import { TransferTask } from '../../types';
 import { Button } from '../ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
 import { formatSpeed, formatTransferBytes } from './utils';
 
 interface SftpTransferItemProps {
     task: TransferTask;
+    isChild?: boolean;
+    childNameColumnWidth?: number;
+    onResizeNameColumn?: (event: React.MouseEvent<HTMLDivElement>) => void;
     onCancel: () => void;
     onRetry: () => void;
     onDismiss: () => void;
     canRevealTarget?: boolean;
     onRevealTarget?: () => void;
+    canToggleChildren?: boolean;
+    isExpanded?: boolean;
+    visibleChildCount?: number;
+    onToggleChildren?: () => void;
 }
 
+const TruncatedTextWithTooltip: React.FC<{
+    text: string;
+    className?: string;
+}> = ({ text, className }) => (
+    <TooltipProvider delayDuration={300} skipDelayDuration={100}>
+        <Tooltip>
+            <TooltipTrigger asChild>
+                <span className={cn("truncate", className)}>
+                    {text}
+                </span>
+            </TooltipTrigger>
+            <TooltipContent side="top" align="start" className="max-w-md break-all">
+                {text}
+            </TooltipContent>
+        </Tooltip>
+    </TooltipProvider>
+);
+
 const SftpTransferItemInner: React.FC<SftpTransferItemProps> = ({
     task,
+    isChild = false,
+    childNameColumnWidth = 260,
+    onResizeNameColumn,
     onCancel,
     onRetry,
     onDismiss,
     canRevealTarget = false,
     onRevealTarget,
+    canToggleChildren = false,
+    isExpanded = false,
+    visibleChildCount: _visibleChildCount = 0,
+    onToggleChildren,
 }) => {
     const { t } = useI18n();
-    const hasKnownTotal = task.totalBytes > 0;
-    const progress = task.totalBytes > 0 ? Math.min((task.transferredBytes / task.totalBytes) * 100, 100) : 0;
-    // Show indeterminate state when transferring but no real progress received yet
-    const isIndeterminate = task.status === 'transferring' && hasKnownTotal && task.transferredBytes === 0;
 
-    // Calculate remaining time from backend-reported sliding-window speed
-    const remainingBytes = task.totalBytes - task.transferredBytes;
+    const progressMode = task.progressMode ?? 'bytes';
+    const isDirParent = task.isDirectory && !task.parentTaskId && progressMode === 'files';
+    const hasKnownTotal = task.totalBytes > 0 || (!isDirParent && !!task.sourceLastModified);
+    const progress = hasKnownTotal
+        ? Math.min((task.transferredBytes / task.totalBytes) * 100, 100)
+        : 0;
+    const isIndeterminate = task.status === 'transferring' && !hasKnownTotal;
     const effectiveSpeed = task.status === 'transferring'
         ? (Number.isFinite(task.speed) && task.speed > 0 ? task.speed : 0)
         : 0;
-    const remainingTime = hasKnownTotal && effectiveSpeed > 0
-        ? Math.ceil(remainingBytes / effectiveSpeed)
-        : 0;
-    const remainingFormatted = remainingTime > 60
-        ? `~${Math.ceil(remainingTime / 60)}m left`
-        : remainingTime > 0
-            ? `~${remainingTime}s left`
-            : '';
 
-    // Format bytes transferred / total
-    const bytesDisplay = task.status === 'transferring' && task.totalBytes > 0
-        ? `${formatTransferBytes(task.transferredBytes)} / ${formatTransferBytes(task.totalBytes)}`
-        : task.status === 'transferring'
-            ? formatTransferBytes(task.transferredBytes)
-        : task.status === 'completed' && task.totalBytes > 0
-            ? formatTransferBytes(task.totalBytes)
+    const bytesDisplay = isDirParent
+        ? ''
+        : task.status === 'transferring' && hasKnownTotal
+            ? `${formatTransferBytes(task.transferredBytes)} / ${formatTransferBytes(task.totalBytes)}`
+            : task.status === 'transferring'
+                ? formatTransferBytes(task.transferredBytes)
+                : task.status === 'completed' && hasKnownTotal
+                    ? formatTransferBytes(task.totalBytes)
+                    : '';
+
+    const fileCountDisplay = isDirParent && task.status === 'transferring'
+        ? (task.totalBytes > 0
+            ? t('sftp.transfers.filesProgress', { current: task.transferredBytes, total: task.totalBytes })
+            : t('sftp.transfers.filesCount', { count: task.transferredBytes }))
+        : isDirParent && task.status === 'completed' && task.totalBytes > 0
+            ? t('sftp.transfers.filesCount', { count: task.totalBytes })
             : '';
 
     const speedFormatted = effectiveSpeed > 0 ? formatSpeed(effectiveSpeed) : '';
     const targetDirectoryPath = task.isDirectory ? task.targetPath : getParentPath(task.targetPath);
 
-    const details = (
-        <>
-            <div className="h-5 w-5 rounded flex items-center justify-center shrink-0">
-                {task.status === 'transferring' && <Loader2 size={12} className="animate-spin text-primary" />}
-                {task.status === 'pending' && (task.isDirectory
-                    ? <FolderUp size={12} className="text-muted-foreground animate-pulse" />
-                    : <ArrowDown size={12} className="text-muted-foreground animate-bounce" />
-                )}
-                {task.status === 'completed' && <CheckCircle2 size={12} className="text-green-500" />}
-                {task.status === 'failed' && <XCircle size={12} className="text-destructive" />}
-                {task.status === 'cancelled' && <XCircle size={12} className="text-muted-foreground" />}
-            </div>
+    const progressOverlayText = task.status === 'pending'
+        ? t('sftp.task.waiting')
+        : isIndeterminate
+            ? t('sftp.transfer.preparing')
+            : isDirParent
+                ? (fileCountDisplay
+                    ? `${fileCountDisplay}${hasKnownTotal ? ` • ${Math.round(progress)}%` : ''}`
+                    : hasKnownTotal
+                        ? `${Math.round(progress)}%`
+                        : '...')
+                : bytesDisplay
+                    ? `${bytesDisplay}${hasKnownTotal ? ` • ${Math.round(progress)}%` : ''}`
+                    : hasKnownTotal
+                        ? `${Math.round(progress)}%`
+                        : '...';
 
-            <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2">
-                    <span className="text-[13px] leading-5 truncate font-medium">{task.fileName}</span>
-                    {task.status === 'transferring' && !isIndeterminate && speedFormatted && (
-                        <span className="text-[10px] text-primary/80 font-mono transition-opacity duration-300">{speedFormatted}</span>
-                    )}
-                    {task.status === 'transferring' && !isIndeterminate && remainingFormatted && (
-                        <span className="text-[10px] text-muted-foreground transition-opacity duration-300">{remainingFormatted}</span>
-                    )}
+    const progressBarWidth = task.status === 'pending' || (task.status === 'transferring' && !hasKnownTotal) || isIndeterminate
+        ? (task.status === 'pending' || !hasKnownTotal ? '100%' : `${progress}%`)
+        : `${progress}%`;
+
+    const statusIcon = task.status === 'transferring'
+        ? <Loader2 size={12} className="animate-spin text-primary" />
+        : task.status === 'pending'
+            ? (task.isDirectory
+                ? <FolderUp size={12} className="text-muted-foreground animate-pulse" />
+                : <ArrowDown size={12} className="text-muted-foreground animate-bounce" />)
+            : task.status === 'completed'
+                ? <CheckCircle2 size={12} className="text-green-500" />
+                : <XCircle size={12} className={task.status === 'failed' ? "text-destructive" : "text-muted-foreground"} />;
+
+    const childProgressBar = (
+        <div className="relative h-full overflow-hidden border border-border/60 bg-secondary/70">
+            <div
+                className={cn(
+                    "h-full relative overflow-hidden",
+                    task.status === 'pending' || (task.status === 'transferring' && !hasKnownTotal)
+                        ? "bg-muted-foreground/35 animate-pulse"
+                        : isIndeterminate
+                            ? "bg-primary/60 animate-pulse"
+                            : task.status === 'completed'
+                                ? "bg-emerald-500/80"
+                                : task.status === 'failed'
+                                    ? "bg-destructive/70"
+                                    : task.status === 'cancelled'
+                                        ? "bg-muted-foreground/45"
+                                        : "bg-gradient-to-r from-primary via-primary/90 to-primary"
+                )}
+                style={{
+                    width: progressBarWidth,
+                    transition: 'width 150ms ease-out',
+                }}
+            >
+                {task.status === 'transferring' && (
+                    <div
+                        className="absolute inset-0 w-1/2 h-full"
+                        style={{
+                            background: 'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.32) 50%, transparent 100%)',
+                            animation: 'progress-shimmer 1.5s ease-in-out infinite',
+                        }}
+                    />
+                )}
+            </div>
+            <div className="pointer-events-none absolute inset-0 flex items-center justify-center px-2">
+                <span className="truncate whitespace-nowrap text-[10px] font-medium text-foreground">
+                    {progressOverlayText}
+                </span>
+            </div>
+        </div>
+    );
+
+    const progressSummaryText = task.status === 'transferring' || task.status === 'pending'
+        ? [speedFormatted, progressOverlayText].filter(Boolean).join(' • ')
+        : '';
+    const showTransferSizeCalculation = task.status === 'transferring' && !hasKnownTotal && !isDirParent;
+    const showFailedError = task.status === 'failed' && !!task.error;
+    const hasFooterContent = showTransferSizeCalculation || showFailedError;
+
+    const actionButtons = (
+        <div className="flex items-center gap-1 shrink-0">
+            {task.status === 'failed' && task.retryable !== false && (
+                <Button variant="ghost" size="icon" className="h-6 w-6" onClick={onRetry} title="Retry">
+                    <RefreshCw size={12} />
+                </Button>
+            )}
+            {(task.status === 'pending' || task.status === 'transferring') && (
+                <Button variant="ghost" size="icon" className="h-6 w-6 text-destructive hover:text-destructive" onClick={onCancel} title="Cancel">
+                    <X size={12} />
+                </Button>
+            )}
+            {(task.status === 'completed' || task.status === 'failed' || task.status === 'cancelled') && (
+                <Button variant="ghost" size="icon" className="h-6 w-6" onClick={onDismiss} title="Dismiss">
+                    <X size={12} />
+                </Button>
+            )}
+        </div>
+    );
+
+    if (isChild) {
+        return (
+            <div
+                className="grid h-7 items-stretch border-t border-border/20 bg-background/20 px-3"
+                style={{
+                    gridTemplateColumns: `24px ${childNameColumnWidth}px 10px minmax(0, 1fr) 24px`,
+                }}
+            >
+                <div className="flex h-full items-center justify-center text-muted-foreground">
+                    {task.isDirectory ? <FolderUp size={12} /> : <File size={12} />}
+                </div>
+                <div className="flex min-w-0 items-center pr-2">
+                    <TruncatedTextWithTooltip
+                        text={task.fileName}
+                        className="min-w-0 text-[11px] font-medium text-foreground/90"
+                    />
                 </div>
                 <div
-                    className={cn(
-                        "text-[9px] mt-0.5 truncate",
-                        canRevealTarget ? "text-primary/80" : "text-muted-foreground",
-                    )}
-                    title={targetDirectoryPath}
+                    className="flex h-full cursor-col-resize items-center justify-center text-muted-foreground/35 hover:text-foreground/70"
+                    onMouseDown={onResizeNameColumn}
+                    title="Resize file name column"
                 >
-                    {targetDirectoryPath}
+                    <GripVertical size={10} />
+                </div>
+                <div className="min-w-0">
+                    {childProgressBar}
+                </div>
+                <div className="flex h-full items-center justify-center">
+                    {actionButtons}
                 </div>
-                {(task.status === 'transferring' || task.status === 'pending') && (
-                    <div className="flex items-center gap-2 mt-1">
-                        <div className="flex-1 h-1.5 bg-secondary/80 rounded-full overflow-hidden">
-                            <div
-                                className={cn(
-                                    "h-full rounded-full relative overflow-hidden",
-                                    task.status === 'pending' || (task.status === 'transferring' && !hasKnownTotal)
-                                        ? "bg-muted-foreground/50 animate-pulse"
-                                        : isIndeterminate
-                                            ? "bg-primary/60 animate-pulse"
-                                            : "bg-gradient-to-r from-primary via-primary/90 to-primary"
-                                )}
-                                style={{
-                                    width: task.status === 'pending' || (task.status === 'transferring' && !hasKnownTotal) || isIndeterminate
-                                        ? '100%'
-                                        : `${progress}%`,
-                                    transition: 'width 150ms ease-out'
-                                }}
-                            >
-                                {/* Animated shine effect */}
-                                {task.status === 'transferring' && (
-                                    <div
-                                        className="absolute inset-0 w-1/2 h-full"
-                                        style={{
-                                            background: 'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%)',
-                                            animation: 'progress-shimmer 1.5s ease-in-out infinite',
-                                        }}
-                                    />
-                                )}
-                            </div>
-                        </div>
-                        <span className="text-[10px] text-muted-foreground shrink-0 min-w-[34px] text-right font-mono">
-                            {task.status === 'pending'
-                                ? 'waiting...'
-                                : isIndeterminate
-                                    ? t('sftp.transfer.preparing')
-                                    : hasKnownTotal
-                                        ? `${Math.round(progress)}%`
-                                        : '...'}
-                        </span>
-                    </div>
-                )}
-                {task.status === 'transferring' && bytesDisplay && (
-                    <div className="text-[9px] text-muted-foreground mt-0.5 font-mono">
-                        {bytesDisplay}
-                    </div>
-                )}
-                {task.status === 'transferring' && !hasKnownTotal && (
-                    <div className="text-[9px] text-muted-foreground mt-0.5">
-                        {t('sftp.transfers.calculatingTotal')}
-                    </div>
-                )}
-                {task.status === 'completed' && bytesDisplay && (
-                    <div className="text-[9px] text-green-600 mt-0.5">
-                        Completed - {bytesDisplay}
-                    </div>
-                )}
-                {task.status === 'failed' && task.error && (
-                    <span className="text-[10px] text-destructive">{task.error}</span>
-                )}
             </div>
-        </>
+        );
+    }
+
+    const showBelowParentProgress = task.status === 'transferring' || task.status === 'pending';
+
+    const titleBlock = (
+        <div className="flex min-w-0 flex-1 items-center gap-1.5">
+            <TruncatedTextWithTooltip
+                text={task.fileName}
+                className="text-[12px] font-medium leading-5"
+            />
+            <ArrowRight size={11} className="shrink-0 text-muted-foreground/70" />
+            <TruncatedTextWithTooltip
+                text={targetDirectoryPath}
+                className={cn(
+                    "min-w-0 text-[11px]",
+                    canRevealTarget ? "text-primary/80" : "text-muted-foreground",
+                )}
+            />
+            {canToggleChildren && (
+                <button
+                    type="button"
+                    className="inline-flex shrink-0 items-center gap-1 rounded border border-border/60 bg-secondary/60 px-1.5 py-0.5 text-[10px] text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+                    onClick={onToggleChildren}
+                    title={isExpanded ? t('sftp.transfers.collapseChildList') : t('sftp.transfers.expandChildList')}
+                >
+                    {isExpanded ? t('sftp.transfers.collapseChildList') : t('sftp.transfers.expandChildList')}
+                    {isExpanded ? <ChevronUp size={10} /> : <ChevronDown size={10} />}
+                </button>
+            )}
+        </div>
     );
 
     return (
-        <div className="flex items-center gap-2.5 px-3 py-2 bg-background/60 border-t border-border/40 backdrop-blur-sm">
-            {canRevealTarget && onRevealTarget ? (
-                <button
-                    type="button"
-                    className="flex flex-1 min-w-0 items-center gap-2.5 rounded-sm text-left transition-colors hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50"
-                    onClick={onRevealTarget}
-                    title="Open transfer destination"
-                >
-                    {details}
-                </button>
-            ) : (
-                details
+        <div className="border-t border-border/40 bg-background/60 px-3 py-2.5 backdrop-blur-sm">
+            <div className="flex items-center gap-1">
+                <div className="flex h-5 w-5 items-center justify-center shrink-0 -translate-y-px">
+                    {statusIcon}
+                </div>
+
+                {canRevealTarget && onRevealTarget ? (
+                    <button
+                        type="button"
+                        className="flex min-w-0 flex-1 rounded-sm text-left transition-colors hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50"
+                        onClick={onRevealTarget}
+                    >
+                        {titleBlock}
+                    </button>
+                ) : (
+                    <div className="min-w-0 flex-1">
+                        {titleBlock}
+                    </div>
+                )}
+
+                {progressSummaryText && (
+                    <span className="ml-auto shrink-0 whitespace-nowrap text-[10px] text-muted-foreground font-mono">
+                        {progressSummaryText}
+                    </span>
+                )}
+
+                {actionButtons}
+            </div>
+
+            {showBelowParentProgress && (
+                <div className="mt-2 ml-7">
+                    <div className="h-1.5 overflow-hidden bg-secondary/80">
+                        <div
+                            className={cn(
+                                "h-full relative overflow-hidden",
+                                task.status === 'pending' || (task.status === 'transferring' && !hasKnownTotal)
+                                    ? "bg-muted-foreground/50 animate-pulse"
+                                    : isIndeterminate
+                                        ? "bg-primary/60 animate-pulse"
+                                        : "bg-gradient-to-r from-primary via-primary/90 to-primary",
+                            )}
+                            style={{
+                                width: progressBarWidth,
+                                transition: 'width 150ms ease-out',
+                            }}
+                        >
+                            {task.status === 'transferring' && (
+                                <div
+                                    className="absolute inset-0 w-1/2 h-full"
+                                    style={{
+                                        background: 'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.32) 50%, transparent 100%)',
+                                        animation: 'progress-shimmer 1.5s ease-in-out infinite',
+                                    }}
+                                />
+                            )}
+                        </div>
+                    </div>
+                </div>
             )}
 
-            <div className="flex items-center gap-1 shrink-0">
-                {task.status === 'failed' && task.retryable !== false && (
-                    <Button variant="ghost" size="icon" className="h-6 w-6" onClick={onRetry} title="Retry">
-                        <RefreshCw size={12} />
-                    </Button>
+            {hasFooterContent && (
+                <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-[10px]">
+                {showTransferSizeCalculation && (
+                    <span className="text-muted-foreground">{t('sftp.transfers.calculatingTotal')}</span>
                 )}
-                {(task.status === 'pending' || task.status === 'transferring') && (
-                    <Button variant="ghost" size="icon" className="h-6 w-6 text-destructive hover:text-destructive" onClick={onCancel} title="Cancel">
-                        <X size={12} />
-                    </Button>
+                {showFailedError && (
+                    <span className="text-destructive">{task.error}</span>
                 )}
-                {(task.status === 'completed' || task.status === 'failed' || task.status === 'cancelled') && (
-                    <Button variant="ghost" size="icon" className="h-6 w-6" onClick={onDismiss} title="Dismiss">
-                        <X size={12} />
-                    </Button>
-                )}
-            </div>
+                </div>
+            )}
         </div>
     );
 };
 
-// Custom comparison function to reduce unnecessary re-renders
-// Only re-render if meaningful values change
 const arePropsEqual = (
     prevProps: SftpTransferItemProps,
-    nextProps: SftpTransferItemProps
+    nextProps: SftpTransferItemProps,
 ): boolean => {
     const prev = prevProps.task;
     const next = nextProps.task;
 
-    // Always re-render on status change
     if (prev.status !== next.status) return false;
-
-    // Always re-render on error change
     if (prev.error !== next.error) return false;
-
-    // Always re-render on fileName change
     if (prev.fileName !== next.fileName) return false;
     if (prev.targetPath !== next.targetPath) return false;
     if (prev.totalBytes !== next.totalBytes) return false;
     if ((prevProps.canRevealTarget ?? false) !== (nextProps.canRevealTarget ?? false)) return false;
+    if ((prevProps.isChild ?? false) !== (nextProps.isChild ?? false)) return false;
+    if ((prevProps.childNameColumnWidth ?? 260) !== (nextProps.childNameColumnWidth ?? 260)) return false;
+    if ((prevProps.canToggleChildren ?? false) !== (nextProps.canToggleChildren ?? false)) return false;
+    if ((prevProps.isExpanded ?? false) !== (nextProps.isExpanded ?? false)) return false;
+    if ((prevProps.visibleChildCount ?? 0) !== (nextProps.visibleChildCount ?? 0)) return false;
 
-    // For transferring status, allow frequent re-renders for smooth progress bar
     if (next.status === 'transferring') {
         if (next.totalBytes <= 0 && prev.transferredBytes !== next.transferredBytes) return false;
 
-        // Re-render on any meaningful progress change (0.1% for smooth bar animation)
         const prevProgress = prev.totalBytes > 0 ? (prev.transferredBytes / prev.totalBytes) * 100 : 0;
         const nextProgress = next.totalBytes > 0 ? (next.transferredBytes / next.totalBytes) * 100 : 0;
         if (Math.abs(nextProgress - prevProgress) >= 0.1) return false;
 
-        // Re-render on any speed change (backend already smooths via sliding window)
         if (next.speed !== prev.speed) return false;
     }
 
-    // For pending status, don't re-render unless status changes
     if (next.status === 'pending') {
         return true;
     }

components/sftp/SftpTransferQueue.tsx

@@ -1,8 +1,14 @@
-import React from "react";
-import { Button } from "../ui/button";
+import { GripHorizontal } from "lucide-react";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useI18n } from "../../application/i18n/I18nProvider";
+import { useStoredNumber } from "../../application/state/useStoredNumber";
 import type { useSftpState } from "../../application/state/useSftpState";
+import {
+  STORAGE_KEY_SFTP_TRANSFER_CHILD_NAME_WIDTH,
+  STORAGE_KEY_SFTP_TRANSFER_PANEL_HEIGHT,
+} from "../../infrastructure/config/storageKeys";
 import type { TransferTask } from "../../types";
+import { Button } from "../ui/button";
 import { SftpTransferItem } from "./SftpTransferItem";
 
 type SftpState = ReturnType<typeof useSftpState>;
@@ -10,25 +16,327 @@ type SftpState = ReturnType<typeof useSftpState>;
 interface SftpTransferQueueProps {
   sftp: SftpState;
   visibleTransfers: SftpState["transfers"];
+  allTransfers: SftpState["transfers"];
   canRevealTransferTarget?: (task: TransferTask) => boolean;
   onRevealTransferTarget?: (task: TransferTask) => void | Promise<void>;
 }
 
+const MIN_PANEL_HEIGHT = 112;
+const MAX_PANEL_HEIGHT = 480;
+const HEADER_HEIGHT = 42;
+const MIN_CHILD_NAME_WIDTH = 160;
+const MAX_CHILD_NAME_WIDTH = 480;
+const CHILD_ROW_HEIGHT = 28;
+const CHILD_VIRTUALIZE_THRESHOLD = 80;
+const CHILD_OVERSCAN = 8;
+
+interface TransferChildListProps {
+  childTasks: TransferTask[];
+  childNameWidth: number;
+  onResizeNameColumn: (event: React.MouseEvent<HTMLDivElement>) => void;
+  scrollContainerRef: React.RefObject<HTMLDivElement>;
+  scrollTop: number;
+  viewportHeight: number;
+  onCancel: (taskId: string) => void;
+  onRetry: (taskId: string) => Promise<void>;
+  onDismiss: (taskId: string) => void;
+}
+
+const TransferChildList: React.FC<TransferChildListProps> = ({
+  childTasks,
+  childNameWidth,
+  onResizeNameColumn,
+  scrollContainerRef,
+  scrollTop,
+  viewportHeight,
+  onCancel,
+  onRetry,
+  onDismiss,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [contentTop, setContentTop] = useState(0);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    const scrollContainer = scrollContainerRef.current;
+    if (!container || !scrollContainer) return;
+
+    const nextTop =
+      container.getBoundingClientRect().top -
+      scrollContainer.getBoundingClientRect().top +
+      scrollTop;
+
+    if (Math.abs(nextTop - contentTop) > 1) {
+      setContentTop(nextTop);
+    }
+  }, [childTasks.length, contentTop, scrollContainerRef, scrollTop, viewportHeight]);
+
+  const needsVirtualization = childTasks.length > CHILD_VIRTUALIZE_THRESHOLD;
+  // Use a fallback viewport height when not yet measured to avoid rendering
+  // all children on the first frame. This caps the initial render to ~15 rows
+  // instead of potentially thousands.
+  const effectiveViewportHeight = viewportHeight > 0 ? viewportHeight : MAX_PANEL_HEIGHT;
+  const shouldVirtualize = needsVirtualization;
+
+  const { startIndex, visibleTasks } = useMemo(() => {
+    if (!shouldVirtualize) {
+      return {
+        startIndex: 0,
+        visibleTasks: childTasks,
+      };
+    }
+
+    const relativeTop = Math.max(0, scrollTop - contentTop);
+    const relativeBottom = Math.max(0, scrollTop + effectiveViewportHeight - contentTop);
+    const start = Math.max(0, Math.floor(relativeTop / CHILD_ROW_HEIGHT) - CHILD_OVERSCAN);
+    const end = Math.min(
+      childTasks.length - 1,
+      Math.ceil(relativeBottom / CHILD_ROW_HEIGHT) + CHILD_OVERSCAN,
+    );
+
+    return {
+      startIndex: start,
+      visibleTasks: childTasks.slice(start, end + 1),
+    };
+  }, [childTasks, contentTop, effectiveViewportHeight, scrollTop, shouldVirtualize]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="border-t border-border/30 bg-background/30"
+    >
+      <div
+        className={shouldVirtualize ? "relative" : undefined}
+        style={shouldVirtualize ? { height: childTasks.length * CHILD_ROW_HEIGHT } : undefined}
+      >
+        {visibleTasks.map((child, visibleIndex) => {
+          const index = shouldVirtualize ? startIndex + visibleIndex : visibleIndex;
+          return (
+            <div
+              key={child.id}
+              className={shouldVirtualize ? "absolute left-0 right-0" : undefined}
+              style={shouldVirtualize ? { top: index * CHILD_ROW_HEIGHT } : undefined}
+            >
+              <SftpTransferItem
+                task={child}
+                isChild
+                childNameColumnWidth={childNameWidth}
+                onResizeNameColumn={onResizeNameColumn}
+                onCancel={() => onCancel(child.id)}
+                onRetry={() => onRetry(child.id)}
+                onDismiss={() => onDismiss(child.id)}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
 export const SftpTransferQueue: React.FC<SftpTransferQueueProps> = ({
   sftp,
   visibleTransfers,
+  allTransfers,
   canRevealTransferTarget,
   onRevealTransferTarget,
 }) => {
   const { t } = useI18n();
+  const [expandedParents, setExpandedParents] = useState<Record<string, boolean>>({});
+  const [panelHeight, setPanelHeight, persistPanelHeight] = useStoredNumber(
+    STORAGE_KEY_SFTP_TRANSFER_PANEL_HEIGHT,
+    220,
+    { min: MIN_PANEL_HEIGHT, max: MAX_PANEL_HEIGHT },
+  );
+  const [childNameWidth, setChildNameWidth, persistChildNameWidth] = useStoredNumber(
+    STORAGE_KEY_SFTP_TRANSFER_CHILD_NAME_WIDTH,
+    260,
+    { min: MIN_CHILD_NAME_WIDTH, max: MAX_CHILD_NAME_WIDTH },
+  );
+  const panelHeightRef = useRef(panelHeight);
+  const childNameWidthRef = useRef(childNameWidth);
+  const dragStateRef = useRef<{ startY: number; startHeight: number } | null>(null);
+  const childColumnDragRef = useRef<{ startX: number; startWidth: number } | null>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [viewportHeight, setViewportHeight] = useState(0);
+  const scrollFrameRef = useRef<number | null>(null);
 
-  if (sftp.transfers.length === 0) {
+  panelHeightRef.current = panelHeight;
+  childNameWidthRef.current = childNameWidth;
+
+  const childrenByParent = useMemo(() => {
+    const map = new Map<string, TransferTask[]>();
+    for (const task of allTransfers) {
+      if (task.parentTaskId && task.status !== "cancelled") {
+        const children = map.get(task.parentTaskId) || [];
+        children.push(task);
+        map.set(task.parentTaskId, children);
+      }
+    }
+    for (const [parentId, children] of map) {
+      map.set(
+        parentId,
+        [...children].sort((a, b) => b.startTime - a.startTime),
+      );
+    }
+    return map;
+  }, [allTransfers]);
+
+  const topLevelTransfers = useMemo(
+    () => visibleTransfers.filter((task) => !task.parentTaskId),
+    [visibleTransfers],
+  );
+
+  const clampPanelHeight = useCallback((height: number) => {
+    if (typeof window === "undefined") {
+      return Math.max(MIN_PANEL_HEIGHT, Math.min(MAX_PANEL_HEIGHT, height));
+    }
+    const viewportMax = Math.floor(window.innerHeight * 0.6);
+    return Math.max(MIN_PANEL_HEIGHT, Math.min(Math.min(MAX_PANEL_HEIGHT, viewportMax), height));
+  }, []);
+
+  useEffect(() => {
+    setExpandedParents((prev) => {
+        const next: Record<string, boolean> = {};
+        let changed = false;
+
+      for (const task of topLevelTransfers) {
+        const hasChildren = (childrenByParent.get(task.id)?.length ?? 0) > 0;
+        if (!hasChildren) continue;
+        next[task.id] = prev[task.id] ?? true;
+        if (next[task.id] !== prev[task.id]) {
+          changed = true;
+        }
+      }
+
+      if (!changed && Object.keys(prev).length === Object.keys(next).length) {
+        return prev;
+      }
+
+      return next;
+    });
+  }, [childrenByParent, topLevelTransfers]);
+
+  useEffect(() => {
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer) return;
+
+    const updateViewport = () => setViewportHeight(scrollContainer.clientHeight);
+    updateViewport();
+
+    const resizeObserver = new ResizeObserver(updateViewport);
+    resizeObserver.observe(scrollContainer);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (scrollFrameRef.current !== null) {
+        window.cancelAnimationFrame(scrollFrameRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleMouseMove = (event: MouseEvent) => {
+      if (dragStateRef.current) {
+        const deltaY = dragStateRef.current.startY - event.clientY;
+        setPanelHeight(clampPanelHeight(dragStateRef.current.startHeight + deltaY));
+      }
+      if (childColumnDragRef.current) {
+        const deltaX = event.clientX - childColumnDragRef.current.startX;
+        const nextWidth = Math.max(
+          MIN_CHILD_NAME_WIDTH,
+          Math.min(MAX_CHILD_NAME_WIDTH, childColumnDragRef.current.startWidth + deltaX),
+        );
+        setChildNameWidth(nextWidth);
+      }
+    };
+
+    const handleMouseUp = () => {
+      const hadPanelDrag = !!dragStateRef.current;
+      const hadChildColumnDrag = !!childColumnDragRef.current;
+      dragStateRef.current = null;
+      childColumnDragRef.current = null;
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      if (hadPanelDrag) {
+        persistPanelHeight(panelHeightRef.current);
+      }
+      if (hadChildColumnDrag) {
+        persistChildNameWidth(childNameWidthRef.current);
+      }
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [clampPanelHeight, panelHeight, persistChildNameWidth, persistPanelHeight, setChildNameWidth, setPanelHeight]);
+
+  const handleResizeStart = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+    dragStateRef.current = {
+      startY: event.clientY,
+      startHeight: panelHeight,
+    };
+    document.body.style.cursor = "row-resize";
+    document.body.style.userSelect = "none";
+  }, [panelHeight]);
+
+  const handleChildColumnResizeStart = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    childColumnDragRef.current = {
+      startX: event.clientX,
+      startWidth: childNameWidth,
+    };
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  }, [childNameWidth]);
+
+  const toggleExpanded = useCallback((taskId: string) => {
+    setExpandedParents((prev) => ({
+      ...prev,
+      [taskId]: !(prev[taskId] ?? true),
+    }));
+  }, []);
+
+  const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
+    const nextTop = event.currentTarget.scrollTop;
+    if (scrollFrameRef.current !== null) return;
+    scrollFrameRef.current = window.requestAnimationFrame(() => {
+      scrollFrameRef.current = null;
+      setScrollTop(nextTop);
+    });
+  }, []);
+
+  if (topLevelTransfers.length === 0) {
     return null;
   }
 
   return (
-    <div className="border-t border-border/70 bg-secondary/80 backdrop-blur-sm shrink-0">
-      <div className="flex items-center justify-between px-3 py-1.5 text-[11px] text-muted-foreground border-b border-border/40">
+    <div
+      className="border-t border-border/70 bg-secondary/80 backdrop-blur-sm shrink-0"
+      style={{ height: clampPanelHeight(panelHeight) }}
+    >
+      <div
+        className="group flex h-3 cursor-row-resize items-center justify-center border-b border-border/30 text-muted-foreground/70"
+        onMouseDown={handleResizeStart}
+        title={t("sftp.transfers.dragToResize")}
+      >
+        <GripHorizontal size={14} className="transition-colors group-hover:text-foreground/80" />
+      </div>
+
+      <div className="flex items-center justify-between border-b border-border/40 px-3 py-1.5 text-[11px] text-muted-foreground">
         <span className="font-medium">
           {t("sftp.transfers")}
           {sftp.activeTransfersCount > 0 && (
@@ -37,8 +345,9 @@ export const SftpTransferQueue: React.FC<SftpTransferQueueProps> = ({
             </span>
           )}
         </span>
+
         {sftp.transfers.some(
-          (tr) => tr.status === "completed" || tr.status === "cancelled",
+          (transfer) => transfer.status === "completed" || transfer.status === "cancelled",
         ) && (
           <Button
             variant="ghost"
@@ -50,29 +359,59 @@ export const SftpTransferQueue: React.FC<SftpTransferQueueProps> = ({
           </Button>
         )}
       </div>
-      <div className="max-h-40 overflow-auto">
-        {visibleTransfers.map((task) => (
-          <SftpTransferItem
-            key={task.id}
-            task={task}
-            onCancel={() => {
-              if (task.sourceConnectionId === "external") {
-                sftp.cancelExternalUpload();
-              }
-              sftp.cancelTransfer(task.id);
-            }}
-            onRetry={() => sftp.retryTransfer(task.id)}
-            onDismiss={() => sftp.dismissTransfer(task.id)}
-            canRevealTarget={canRevealTransferTarget?.(task) ?? false}
-            onRevealTarget={
-              onRevealTransferTarget
-                ? () => {
-                    void onRevealTransferTarget(task);
+
+      <div
+        ref={scrollContainerRef}
+        className="overflow-auto"
+        style={{ height: `calc(100% - ${HEADER_HEIGHT}px)` }}
+        onScroll={handleScroll}
+      >
+        {topLevelTransfers.map((task) => {
+          const childTasks = childrenByParent.get(task.id) ?? [];
+          const isExpanded = expandedParents[task.id] ?? true;
+
+          return (
+            <React.Fragment key={task.id}>
+              <SftpTransferItem
+                task={task}
+                canToggleChildren={childTasks.length > 0}
+                isExpanded={isExpanded}
+                visibleChildCount={childTasks.length}
+                onToggleChildren={() => toggleExpanded(task.id)}
+                onCancel={() => {
+                  if (task.sourceConnectionId === "external") {
+                    sftp.cancelExternalUpload();
                   }
-                : undefined
-            }
-          />
-        ))}
+                  sftp.cancelTransfer(task.id);
+                }}
+                onRetry={() => sftp.retryTransfer(task.id)}
+                onDismiss={() => sftp.dismissTransfer(task.id)}
+                canRevealTarget={canRevealTransferTarget?.(task) ?? false}
+                onRevealTarget={
+                  onRevealTransferTarget
+                    ? () => {
+                        void onRevealTransferTarget(task);
+                      }
+                    : undefined
+                }
+              />
+
+              {isExpanded && childTasks.length > 0 && (
+                <TransferChildList
+                  childTasks={childTasks}
+                  childNameWidth={childNameWidth}
+                  onResizeNameColumn={handleChildColumnResizeStart}
+                  scrollContainerRef={scrollContainerRef}
+                  scrollTop={scrollTop}
+                  viewportHeight={viewportHeight}
+                  onCancel={(taskId) => sftp.cancelTransfer(taskId)}
+                  onRetry={(taskId) => sftp.retryTransfer(taskId)}
+                  onDismiss={(taskId) => sftp.dismissTransfer(taskId)}
+                />
+              )}
+            </React.Fragment>
+          );
+        })}
       </div>
     </div>
   );

components/sftp/hooks/selectionScope.ts

@@ -0,0 +1,37 @@
+import type { SftpStateApi } from "../../../application/state/useSftpState";
+import { sftpTreeSelectionStore } from "./useSftpTreeSelectionStore";
+
+export interface SftpSelectionTarget {
+  side: "left" | "right";
+  tabId: string;
+}
+
+export const keepOnlyPaneSelections = (
+  sftp: SftpStateApi,
+  target: SftpSelectionTarget | null,
+) => {
+  sftp.clearSelectionsExcept(target);
+  const paneIds = [
+    ...sftp.leftTabs.tabs.map((tab) => tab.id),
+    ...sftp.rightTabs.tabs.map((tab) => tab.id),
+  ];
+  for (const paneId of paneIds) {
+    if (target?.tabId === paneId) continue;
+    sftpTreeSelectionStore.clearSelection(paneId);
+  }
+};
+
+export const keepOnlyActivePaneSelections = (
+  sftp: SftpStateApi,
+  side: "left" | "right",
+): SftpSelectionTarget | null => {
+  const tabId = sftp.getActiveTabId(side);
+  if (!tabId) {
+    keepOnlyPaneSelections(sftp, null);
+    return null;
+  }
+
+  const target = { side, tabId } as const;
+  keepOnlyPaneSelections(sftp, target);
+  return target;
+};

components/sftp/hooks/useGlobalSftpBookmarks.ts

@@ -18,10 +18,26 @@ function getSnapshot() {
     return snapshot;
 }
 
+/** Re-read bookmarks from localStorage (e.g. after cloud sync import). */
+export function rehydrateGlobalBookmarks() {
+    snapshot = localStorageAdapter.read<SftpBookmark[]>(STORAGE_KEY_SFTP_GLOBAL_BOOKMARKS) ?? [];
+    for (const l of listeners) l();
+}
+
+// Rehydrate when another window updates the same localStorage key
+if (typeof window !== 'undefined') {
+    window.addEventListener('storage', (e) => {
+        if (e.key === STORAGE_KEY_SFTP_GLOBAL_BOOKMARKS) {
+            rehydrateGlobalBookmarks();
+        }
+    });
+}
+
 function setBookmarks(next: SftpBookmark[] | ((prev: SftpBookmark[]) => SftpBookmark[])) {
     snapshot = typeof next === "function" ? next(snapshot) : next;
     localStorageAdapter.write(STORAGE_KEY_SFTP_GLOBAL_BOOKMARKS, snapshot);
     for (const l of listeners) l();
+    window.dispatchEvent(new CustomEvent('sftp-bookmarks-changed'));
 }
 
 interface UseGlobalSftpBookmarksParams {

components/sftp/hooks/useSftpDialogAction.ts

@@ -13,6 +13,7 @@ type SftpDialogActionType = "rename" | "delete" | "newFolder" | "newFile" | null
 interface SftpDialogAction {
   type: SftpDialogActionType;
   targetSide: SftpFocusedSide;
+  targetScopeId: string;
   targetFiles?: string[]; // For rename (single file) or delete (multiple files)
   timestamp: number; // To distinguish different triggers of the same action
 }
@@ -37,13 +38,14 @@ export const sftpDialogActionStore = {
   /**
    * Trigger a dialog action
    */
-  trigger: (type: SftpDialogActionType, targetFiles?: string[]) => {
+  trigger: (type: SftpDialogActionType, targetScopeId: string, targetFiles?: string[]) => {
     if (!type) {
       dialogAction = null;
     } else {
       dialogAction = {
         type,
         targetSide: sftpFocusStore.getFocusedSide(),
+        targetScopeId,
         targetFiles,
         timestamp: Date.now(),
       };
@@ -82,17 +84,19 @@ export const useSftpDialogAction = (): SftpDialogAction | null => {
  */
 export const useSftpDialogActionHandler = (
   side: SftpFocusedSide,
+  scopeId: string,
   handlers: {
     onRename?: (fileName: string) => void;
     onDelete?: (fileNames: string[]) => void;
     onNewFolder?: () => void;
     onNewFile?: () => void;
-  }
+  },
+  isActive = true
 ) => {
   const action = useSftpDialogAction();
 
   useEffect(() => {
-    if (!action || action.targetSide !== side) return;
+    if (!action || action.targetSide !== side || action.targetScopeId !== scopeId || !isActive) return;
 
     // Handle the action and clear it
     switch (action.type) {
@@ -116,5 +120,5 @@ export const useSftpDialogActionHandler = (
 
     // Clear the action after handling
     sftpDialogActionStore.clear();
-  }, [action, side, handlers]);
+  }, [action, side, scopeId, handlers, isActive]);
 };

components/sftp/hooks/useSftpHostViewMode.ts

@@ -0,0 +1,70 @@
+import { useCallback, useSyncExternalStore } from "react";
+import { localStorageAdapter } from "../../../infrastructure/persistence/localStorageAdapter";
+import { STORAGE_KEY_SFTP_HOST_VIEW_MODES } from "../../../infrastructure/config/storageKeys";
+
+// ── Shared external store for per-host SFTP view mode preferences ──
+
+type ViewMode = 'list' | 'tree';
+type Listener = () => void;
+
+const listeners = new Set<Listener>();
+
+let snapshot: Record<string, ViewMode> =
+    localStorageAdapter.read<Record<string, ViewMode>>(STORAGE_KEY_SFTP_HOST_VIEW_MODES) ?? {};
+
+function subscribe(listener: Listener) {
+    listeners.add(listener);
+    return () => { listeners.delete(listener); };
+}
+
+function getSnapshot() {
+    return snapshot;
+}
+
+function persist(next: Record<string, ViewMode>) {
+    snapshot = next;
+    localStorageAdapter.write(STORAGE_KEY_SFTP_HOST_VIEW_MODES, snapshot);
+    for (const l of listeners) l();
+}
+
+// Sync across windows/tabs via storage events
+if (typeof window !== 'undefined') {
+    window.addEventListener('storage', (e) => {
+        if (e.key !== STORAGE_KEY_SFTP_HOST_VIEW_MODES) return;
+        try {
+            snapshot = e.newValue
+                ? (JSON.parse(e.newValue) as Record<string, ViewMode>)
+                : {};
+        } catch {
+            snapshot = {};
+        }
+        for (const l of listeners) l();
+    });
+}
+
+/** Get the saved view mode for a specific host, or null if none saved. */
+export function getHostViewMode(hostId: string): ViewMode | null {
+    return snapshot[hostId] ?? null;
+}
+
+/** Save the view mode preference for a specific host. */
+export function setHostViewMode(hostId: string, mode: ViewMode): void {
+    if (snapshot[hostId] === mode) return;
+    persist({ ...snapshot, [hostId]: mode });
+}
+
+// ── Hook ──
+
+export function useSftpHostViewMode(hostId: string | undefined) {
+    const store = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+    const mode: ViewMode | null = hostId ? (store[hostId] ?? null) : null;
+
+    const setMode = useCallback((newMode: ViewMode) => {
+        if (hostId) {
+            setHostViewMode(hostId, newMode);
+        }
+    }, [hostId]);
+
+    return { hostViewMode: mode, setHostViewMode: setMode };
+}

components/sftp/hooks/useSftpKeyboardShortcuts.ts

@@ -8,11 +8,16 @@
 import { useCallback, useEffect } from "react";
 import type { MutableRefObject } from "react";
 import { KeyBinding, matchesKeyBinding } from "../../../domain/models";
+import { getParentPath, joinPath } from "../../../application/state/sftp/utils";
 import { sftpClipboardStore, SftpClipboardFile } from "./useSftpClipboard";
 import { sftpFocusStore } from "./useSftpFocusedPane";
 import { sftpDialogActionStore } from "./useSftpDialogAction";
+import { sftpTreeSelectionStore } from "./useSftpTreeSelectionStore";
+import { sftpListOrderStore } from "./useSftpListOrderStore";
+import { keepOnlyPaneSelections } from "./selectionScope";
 import type { SftpStateApi } from "../../../application/state/useSftpState";
 import { filterHiddenFiles, isNavigableDirectory } from "../index";
+import type { SftpFileEntry } from "../../../types";
 import { toast } from "../../ui/toast";
 
 // SFTP action names that we handle
@@ -25,12 +30,70 @@ const SFTP_ACTIONS = new Set([
   "sftpDelete",
   "sftpRefresh",
   "sftpNewFolder",
+  "sftpOpen",
+  "sftpGoParent",
+  "sftpNavigateTo",
 ]);
 
+// ── Tree Enter key action store ──────────────────────────────────────
+// Allows the keyboard shortcut hook to signal tree views to handle Enter.
+
+type TreeEnterListener = () => void;
+
+interface TreeEnterAction {
+  paneId: string;
+  entryPath: string;
+  isDirectory: boolean;
+  timestamp: number;
+}
+
+let _treeEnterAction: TreeEnterAction | null = null;
+const _treeEnterListeners = new Set<TreeEnterListener>();
+const notifyTreeEnterListeners = () => _treeEnterListeners.forEach((l) => l());
+
+export const sftpTreeEnterStore = {
+  trigger: (paneId: string, entryPath: string, isDirectory: boolean) => {
+    _treeEnterAction = { paneId, entryPath, isDirectory, timestamp: Date.now() };
+    notifyTreeEnterListeners();
+  },
+  get: () => _treeEnterAction,
+  clear: () => {
+    _treeEnterAction = null;
+    notifyTreeEnterListeners();
+  },
+  subscribe: (listener: TreeEnterListener) => {
+    _treeEnterListeners.add(listener);
+    return () => { _treeEnterListeners.delete(listener); };
+  },
+  getSnapshot: () => _treeEnterAction,
+};
+
+// ── Keyboard selection anchor/focus tracking ────────────────────────
+// Tracks the anchor (where Shift-selection started) and focus (cursor)
+// indices per pane so Shift+Arrow extends correctly.
+const _kbSelectionState = new Map<string, { anchor: number; focus: number }>();
+
+export const sftpKeyboardSelectionStore = {
+  get: (paneId: string) => _kbSelectionState.get(paneId) ?? { anchor: 0, focus: 0 },
+  set: (paneId: string, anchor: number, focus: number) => {
+    _kbSelectionState.set(paneId, { anchor, focus });
+  },
+  clear: (paneId: string) => {
+    _kbSelectionState.delete(paneId);
+  },
+};
+
+// Basic navigation keys that work even when custom hotkeys are disabled.
+const BASIC_NAV_KEYS: Record<string, string> = {
+  'Enter': 'sftpOpen',
+  'Backspace': 'sftpGoParent',
+};
+
 interface UseSftpKeyboardShortcutsParams {
   keyBindings: KeyBinding[];
   hotkeyScheme: "disabled" | "mac" | "pc";
   sftpRef: MutableRefObject<SftpStateApi>;
+  dialogActionScopeId: string;
   isActive: boolean;
 }
 
@@ -56,12 +119,14 @@ export const useSftpKeyboardShortcuts = ({
   keyBindings,
   hotkeyScheme,
   sftpRef,
+  dialogActionScopeId,
   isActive,
 }: UseSftpKeyboardShortcutsParams) => {
   const handleKeyDown = useCallback(
     async (e: KeyboardEvent) => {
-      // Skip if shortcuts are disabled or SFTP is not active
-      if (hotkeyScheme === "disabled" || !isActive) return;
+      // Basic SFTP keyboard navigation should work whenever the SFTP tab is active,
+      // even if the user has disabled global/custom hotkeys.
+      if (!isActive) return;
 
       // Skip if focus is on an input element
       const target = e.target as HTMLElement;
@@ -74,12 +139,126 @@ export const useSftpKeyboardShortcuts = ({
         return;
       }
 
-      const isMac = hotkeyScheme === "mac";
-      const matched = matchSftpAction(e, keyBindings, isMac);
-      if (!matched) return;
+      // Skip when a dialog or overlay is open to prevent SFTP shortcuts from
+      // firing while interacting with unrelated dialogs (e.g. settings, confirm).
+      if (document.querySelector('[role="dialog"][data-state="open"]')) {
+        return;
+      }
 
-      const { action } = matched;
-      if (!SFTP_ACTIONS.has(action)) return;
+      // ── Arrow Up/Down: move selection ────────────────────────────────
+      if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        const sftp = sftpRef.current;
+        const focusedSide = sftpFocusStore.getFocusedSide();
+        const pane = focusedSide === "left"
+          ? sftp.leftTabs.tabs.find(p => p.id === sftp.leftTabs.activeTabId)
+          : sftp.rightTabs.tabs.find(p => p.id === sftp.rightTabs.activeTabId);
+        if (!pane || !pane.connection) return;
+
+        const delta = e.key === 'ArrowDown' ? 1 : -1;
+
+        // List view: navigate sorted display files.
+        // Prefer the list store when it exists so stale tree selection state
+        // cannot swallow keyboard navigation after switching views.
+        const listItems = sftpListOrderStore.getItems(pane.id);
+        if (listItems.length > 0) {
+          e.preventDefault();
+          e.stopPropagation();
+
+          // Resolve current focus position from tracked state, falling back
+          // to the actual selection when out of sync (e.g. after mouse click).
+          let { anchor: anchorIdx, focus: focusIdx } = sftpKeyboardSelectionStore.get(pane.id);
+          const currentSelected = Array.from(pane.selectedFiles) as string[];
+          if (currentSelected.length === 0) {
+            // No selection: start from before the list so the first arrow press lands on item 0.
+            // For Shift+Arrow, anchor at 0 so range selection starts from the first item.
+            anchorIdx = e.shiftKey ? 0 : -1;
+            focusIdx = -1;
+          } else if (!currentSelected.includes(listItems[focusIdx])) {
+            // Tracked focus doesn't match actual selection, re-sync
+            focusIdx = listItems.indexOf(currentSelected[currentSelected.length - 1]);
+            if (focusIdx < 0) focusIdx = 0;
+            anchorIdx = focusIdx;
+            sftpKeyboardSelectionStore.set(pane.id, anchorIdx, focusIdx);
+          }
+
+          let nextIdx = focusIdx + delta;
+          if (nextIdx < 0) nextIdx = 0;
+          if (nextIdx >= listItems.length) nextIdx = listItems.length - 1;
+
+          keepOnlyPaneSelections(sftp, { side: focusedSide, tabId: pane.id });
+          if (e.shiftKey) {
+            // Shift+Arrow: extend range from anchor to new focus
+            const start = Math.min(anchorIdx, nextIdx);
+            const end = Math.max(anchorIdx, nextIdx);
+            sftp.rangeSelect(focusedSide, listItems.slice(start, end + 1));
+            sftpKeyboardSelectionStore.set(pane.id, anchorIdx, nextIdx);
+          } else {
+            sftp.rangeSelect(focusedSide, [listItems[nextIdx]]);
+            sftpKeyboardSelectionStore.set(pane.id, nextIdx, nextIdx);
+          }
+          return;
+        }
+
+        // Tree view: navigate visible items
+        const treeState = sftpTreeSelectionStore.getPaneState(pane.id);
+        if (treeState.visibleItems.length > 0) {
+          e.preventDefault();
+          e.stopPropagation();
+          const items = treeState.visibleItems;
+          const currentSelected = [...treeState.selectedPaths];
+
+          // Use tracked state, re-sync if needed
+          let { anchor: anchorIdx, focus: focusIdx } = sftpKeyboardSelectionStore.get(pane.id);
+          if (currentSelected.length === 0) {
+            // No selection: start from before the list so the first arrow press lands on item 0.
+            // For Shift+Arrow, anchor at 0 so range selection starts from the first item.
+            anchorIdx = e.shiftKey ? 0 : -1;
+            focusIdx = -1;
+          } else {
+            const focusPath = items[focusIdx]?.path;
+            if (!focusPath || !treeState.selectedPaths.has(focusPath)) {
+              focusIdx = treeState.visibleIndexByPath.get(currentSelected[currentSelected.length - 1]) ?? 0;
+              anchorIdx = focusIdx;
+              sftpKeyboardSelectionStore.set(pane.id, anchorIdx, focusIdx);
+            }
+          }
+
+          let nextIdx = focusIdx + delta;
+          if (nextIdx < 0) nextIdx = 0;
+          if (nextIdx >= items.length) nextIdx = items.length - 1;
+
+          keepOnlyPaneSelections(sftp, { side: focusedSide, tabId: pane.id });
+          if (e.shiftKey) {
+            const start = Math.min(anchorIdx, nextIdx);
+            const end = Math.max(anchorIdx, nextIdx);
+            const paths = items.slice(start, end + 1).map(item => item.path);
+            sftpTreeSelectionStore.setSelection(pane.id, paths);
+            sftpKeyboardSelectionStore.set(pane.id, anchorIdx, nextIdx);
+          } else {
+            sftpTreeSelectionStore.setSelection(pane.id, [items[nextIdx].path]);
+            sftpKeyboardSelectionStore.set(pane.id, nextIdx, nextIdx);
+          }
+          return;
+        }
+        return;
+      }
+
+      // Basic navigation actions (Enter, Backspace) must work even when
+      // custom hotkeys are disabled — they are essential SFTP navigation.
+      // When hotkeys are enabled, defer to matchSftpAction so user
+      // customizations are respected.
+      const basicNavAction = hotkeyScheme === "disabled" && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey
+        ? BASIC_NAV_KEYS[e.key]
+        : undefined;
+
+      if (hotkeyScheme === "disabled" && !basicNavAction) return;
+
+      const isMac = hotkeyScheme === "mac";
+      const matched = basicNavAction ? null : matchSftpAction(e, keyBindings, isMac);
+      if (!matched && !basicNavAction) return;
+
+      const action = basicNavAction ?? matched?.action;
+      if (!action || !SFTP_ACTIONS.has(action)) return;
 
       // Prevent default behavior
       e.preventDefault();
@@ -94,49 +273,100 @@ export const useSftpKeyboardShortcuts = ({
         : sftp.rightTabs.tabs.find(p => p.id === sftp.rightTabs.activeTabId);
 
       if (!pane || !pane.connection) return;
+      const treeSelectionState = sftpTreeSelectionStore.getPaneState(pane.id);
+      const treeSelection = sftpTreeSelectionStore.getSelectedItems(pane.id);
+      const treeActionSelection = treeSelection.filter((entry) => entry.name !== '..');
 
       switch (action) {
         case "sftpCopy": {
+          if (treeActionSelection.length > 0) {
+            const parentPaths = new Set(treeActionSelection.map((entry) => getParentPath(entry.path)));
+            if (parentPaths.size !== 1) {
+              toast.info("Tree selection across multiple folders can't be copied with shortcuts yet.", "SFTP");
+              return;
+            }
+
+            const clipboardFiles: SftpClipboardFile[] = treeActionSelection.map((entry) => ({
+              name: entry.name,
+              isDirectory: entry.isDirectory,
+            }));
+
+            sftpClipboardStore.copy(
+              clipboardFiles,
+              Array.from(parentPaths)[0],
+              pane.connection.id,
+              focusedSide,
+            );
+            break;
+          }
+
           // Copy selected files to clipboard
           const selectedFiles = Array.from(pane.selectedFiles) as string[];
           if (selectedFiles.length === 0) return;
 
-          const clipboardFiles: SftpClipboardFile[] = selectedFiles.map((name: string) => {
-            const file = pane.files.find((f) => f.name === name);
-            return {
-              name,
-              isDirectory: file ? isNavigableDirectory(file) : false,
-            };
-          });
+          {
+            const filesByName = new Map((pane.files as SftpFileEntry[]).map(f => [f.name, f]));
+            const clipboardFiles: SftpClipboardFile[] = selectedFiles.map((name: string) => {
+              const file = filesByName.get(name);
+              return {
+                name,
+                isDirectory: file ? isNavigableDirectory(file) : false,
+              };
+            });
 
-          sftpClipboardStore.copy(
-            clipboardFiles,
-            pane.connection.currentPath,
-            pane.connection.id,
-            focusedSide
-          );
+            sftpClipboardStore.copy(
+              clipboardFiles,
+              pane.connection.currentPath,
+              pane.connection.id,
+              focusedSide
+            );
+          }
           break;
         }
 
         case "sftpCut": {
+          if (treeActionSelection.length > 0) {
+            const parentPaths = new Set(treeActionSelection.map((entry) => getParentPath(entry.path)));
+            if (parentPaths.size !== 1) {
+              toast.info("Tree selection across multiple folders can't be cut with shortcuts yet.", "SFTP");
+              return;
+            }
+
+            const clipboardFiles: SftpClipboardFile[] = treeActionSelection.map((entry) => ({
+              name: entry.name,
+              isDirectory: entry.isDirectory,
+            }));
+
+            sftpClipboardStore.cut(
+              clipboardFiles,
+              Array.from(parentPaths)[0],
+              pane.connection.id,
+              focusedSide,
+            );
+            break;
+          }
+
           // Cut selected files to clipboard
           const selectedFiles = Array.from(pane.selectedFiles) as string[];
           if (selectedFiles.length === 0) return;
 
-          const clipboardFiles: SftpClipboardFile[] = selectedFiles.map((name: string) => {
-            const file = pane.files.find((f) => f.name === name);
-            return {
-              name,
-              isDirectory: file ? isNavigableDirectory(file) : false,
-            };
-          });
+          {
+            const filesByName = new Map((pane.files as SftpFileEntry[]).map(f => [f.name, f]));
+            const clipboardFiles: SftpClipboardFile[] = selectedFiles.map((name: string) => {
+              const file = filesByName.get(name);
+              return {
+                name,
+                isDirectory: file ? isNavigableDirectory(file) : false,
+              };
+            });
 
-          sftpClipboardStore.cut(
-            clipboardFiles,
-            pane.connection.currentPath,
-            pane.connection.id,
-            focusedSide
-          );
+            sftpClipboardStore.cut(
+              clipboardFiles,
+              pane.connection.currentPath,
+              pane.connection.id,
+              focusedSide
+            );
+          }
           break;
         }
 
@@ -146,8 +376,10 @@ export const useSftpKeyboardShortcuts = ({
           if (!clipboard || clipboard.files.length === 0) return;
 
           // Use startTransfer to paste files from source to current pane
-          // The transfer direction is determined by clipboard sourceSide and current focusedSide
-          if (clipboard.sourceSide !== focusedSide) {
+          // Allow paste when source and target are different connections, even on the same side
+          const isSameConnection = clipboard.sourceSide === focusedSide
+            && clipboard.sourceConnectionId === pane.connection.id;
+          if (!isSameConnection) {
             const sourceTabs = clipboard.sourceSide === "left" ? sftp.leftTabs.tabs : sftp.rightTabs.tabs;
             const sourcePane = sourceTabs.find((tab) => tab.connection?.id === clipboard.sourceConnectionId);
 
@@ -234,7 +466,17 @@ export const useSftpKeyboardShortcuts = ({
         }
 
         case "sftpSelectAll": {
+          if (treeSelectionState.visibleItems.length > 0) {
+            keepOnlyPaneSelections(sftp, { side: focusedSide, tabId: pane.id });
+            sftpTreeSelectionStore.selectAllVisible(pane.id);
+            break;
+          }
+
           // Select all files in the current pane
+          // TODO: Reference already-computed filtered files from useSftpPaneFiles
+          // instead of re-implementing the hidden file + filter logic here.
+          // This requires either lifting the computed files into pane state or
+          // passing them via a shared store, which needs a larger refactor.
           const term = pane.filter.trim().toLowerCase();
           let visibleFiles = filterHiddenFiles(pane.files, pane.showHiddenFiles);
           if (term) {
@@ -245,23 +487,38 @@ export const useSftpKeyboardShortcuts = ({
           const allFileNames = visibleFiles
             .filter((f) => f.name !== "..")
             .map((f) => f.name);
+          keepOnlyPaneSelections(sftp, { side: focusedSide, tabId: pane.id });
           sftp.rangeSelect(focusedSide, allFileNames);
           break;
         }
 
         case "sftpRename": {
+          if (treeActionSelection.length === 1) {
+            sftpDialogActionStore.trigger("rename", dialogActionScopeId, [treeActionSelection[0].path]);
+            break;
+          }
+
           // Trigger rename for the first selected file
           const selectedFiles = Array.from(pane.selectedFiles) as string[];
           if (selectedFiles.length !== 1) return;
-          sftpDialogActionStore.trigger("rename", selectedFiles);
+          sftpDialogActionStore.trigger("rename", dialogActionScopeId, selectedFiles);
           break;
         }
 
         case "sftpDelete": {
+          if (treeActionSelection.length > 0) {
+            sftpDialogActionStore.trigger(
+              "delete",
+              dialogActionScopeId,
+              treeActionSelection.map((entry) => entry.path),
+            );
+            break;
+          }
+
           // Delete selected files
           const selectedFiles = Array.from(pane.selectedFiles) as string[];
           if (selectedFiles.length === 0) return;
-          sftpDialogActionStore.trigger("delete", selectedFiles);
+          sftpDialogActionStore.trigger("delete", dialogActionScopeId, selectedFiles);
           break;
         }
 
@@ -273,12 +530,70 @@ export const useSftpKeyboardShortcuts = ({
 
         case "sftpNewFolder": {
           // Create new folder
-          sftpDialogActionStore.trigger("newFolder");
+          sftpDialogActionStore.trigger("newFolder", dialogActionScopeId);
+          break;
+        }
+
+        case "sftpOpen": {
+          // Prefer list selection when the list store is active
+          const listItems = sftpListOrderStore.getItems(pane.id);
+          const selectedFiles = Array.from(pane.selectedFiles) as string[];
+          if (listItems.length > 0 && selectedFiles.length === 1) {
+            const fileName = selectedFiles[0];
+            const entry = (pane.files as SftpFileEntry[]).find(f => f.name === fileName);
+            if (entry) {
+              if (isNavigableDirectory(entry)) {
+                _kbSelectionState.delete(pane.id);
+                sftp.navigateTo(focusedSide, joinPath(pane.connection.currentPath, entry.name));
+              } else {
+                sftp.openEntry(focusedSide, entry);
+              }
+            }
+            break;
+          }
+
+          // Only fall through to tree view if list store is empty (tree view mode)
+          if (listItems.length > 0) break;
+          const treeOpenSelection = sftpTreeSelectionStore.getSelectedItems(pane.id);
+          if (treeOpenSelection.length === 1) {
+            const item = treeOpenSelection[0];
+            if (item.isDirectory) _kbSelectionState.delete(pane.id);
+            sftpTreeEnterStore.trigger(pane.id, item.path, item.isDirectory);
+          }
+          break;
+        }
+
+        case "sftpGoParent": {
+          const parentPath = getParentPath(pane.connection.currentPath);
+          if (parentPath !== pane.connection.currentPath) {
+            _kbSelectionState.delete(pane.id);
+            sftp.navigateTo(focusedSide, parentPath);
+          }
+          break;
+        }
+
+        case "sftpNavigateTo": {
+          // Navigate to the selected directory (useful in tree view)
+          // Filter out ".." entry for consistency with other handlers
+          if (treeActionSelection.length === 1 && treeActionSelection[0].isDirectory) {
+            _kbSelectionState.delete(pane.id);
+            sftp.navigateTo(focusedSide, treeActionSelection[0].path);
+            break;
+          }
+          // In list view, navigate to selected directory
+          const selectedFiles = Array.from(pane.selectedFiles) as string[];
+          if (selectedFiles.length === 1) {
+            const entry = (pane.files as SftpFileEntry[]).find(f => f.name === selectedFiles[0]);
+            if (entry && isNavigableDirectory(entry)) {
+              _kbSelectionState.delete(pane.id);
+              sftp.navigateTo(focusedSide, joinPath(pane.connection.currentPath, entry.name));
+            }
+          }
           break;
         }
       }
     },
-    [hotkeyScheme, isActive, keyBindings, sftpRef]
+    [dialogActionScopeId, hotkeyScheme, isActive, keyBindings, sftpRef]
   );
 
   useEffect(() => {

components/sftp/hooks/useSftpListOrderStore.ts

@@ -0,0 +1,20 @@
+/**
+ * Lightweight store that tracks the sorted display file names per SFTP pane.
+ * Used by keyboard shortcuts to navigate with ArrowUp/ArrowDown in list view.
+ */
+
+const paneItems = new Map<string, string[]>();
+
+export const sftpListOrderStore = {
+  /** Update the ordered list of file names for a pane (call from SftpPaneFileList). */
+  setItems: (paneId: string, names: string[]) => {
+    paneItems.set(paneId, names);
+  },
+
+  /** Get the ordered list of file names (excluding "..") for arrow key navigation. */
+  getItems: (paneId: string): string[] => paneItems.get(paneId) ?? [],
+
+  clearPane: (paneId: string) => {
+    paneItems.delete(paneId);
+  },
+};

components/sftp/hooks/useSftpPaneDialogs.ts

@@ -1,15 +1,46 @@
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import type { SftpPaneCallbacks } from "../SftpContext";
 import type { SftpPane } from "../../../application/state/sftp/types";
+import { getFileName, getParentPath } from "../../../application/state/sftp/utils";
+import { logger } from "../../../lib/logger";
+
+const INVALID_FILENAME_CHARS = /[/\\:*?"<>|]/;
+const RESERVED_NAMES = new Set([
+  "CON",
+  "PRN",
+  "AUX",
+  "NUL",
+  "COM1",
+  "COM2",
+  "COM3",
+  "COM4",
+  "COM5",
+  "COM6",
+  "COM7",
+  "COM8",
+  "COM9",
+  "LPT1",
+  "LPT2",
+  "LPT3",
+  "LPT4",
+  "LPT5",
+  "LPT6",
+  "LPT7",
+  "LPT8",
+  "LPT9",
+]);
 
 interface UseSftpPaneDialogsParams {
   t: (key: string, params?: Record<string, unknown>) => string;
   pane: SftpPane;
   onCreateDirectory: SftpPaneCallbacks["onCreateDirectory"];
+  onCreateDirectoryAtPath: SftpPaneCallbacks["onCreateDirectoryAtPath"];
   onCreateFile: SftpPaneCallbacks["onCreateFile"];
-  onRenameFile: SftpPaneCallbacks["onRenameFile"];
-  onDeleteFiles: SftpPaneCallbacks["onDeleteFiles"];
+  onCreateFileAtPath: SftpPaneCallbacks["onCreateFileAtPath"];
+  onRenameFileAtPath: SftpPaneCallbacks["onRenameFileAtPath"];
+  onDeleteFilesAtPath: SftpPaneCallbacks["onDeleteFilesAtPath"];
   onClearSelection: SftpPaneCallbacks["onClearSelection"];
+  onMutateSuccess?: (paths?: string[]) => void;
 }
 
 interface UseSftpPaneDialogsResult {
@@ -47,6 +78,8 @@ interface UseSftpPaneDialogsResult {
   handleConfirmOverwrite: () => Promise<void>;
   handleRename: () => Promise<void>;
   handleDelete: () => Promise<void>;
+  openNewFolderDialogAtPath: (path: string) => void;
+  openNewFileDialogAtPath: (path: string) => void;
   openRenameDialog: (name: string) => void;
   openDeleteConfirm: (names: string[]) => void;
   getNextUntitledName: (existingFiles: string[]) => string;
@@ -56,17 +89,21 @@ export const useSftpPaneDialogs = ({
   t,
   pane,
   onCreateDirectory,
+  onCreateDirectoryAtPath,
   onCreateFile,
-  onRenameFile,
-  onDeleteFiles,
+  onCreateFileAtPath,
+  onRenameFileAtPath,
+  onDeleteFilesAtPath,
   onClearSelection,
+  onMutateSuccess,
 }: UseSftpPaneDialogsParams): UseSftpPaneDialogsResult => {
   const [showHostPicker, setShowHostPicker] = useState(false);
   const [hostSearch, setHostSearch] = useState("");
-  const [showNewFolderDialog, setShowNewFolderDialog] = useState(false);
+  const [showNewFolderDialogState, setShowNewFolderDialogState] = useState(false);
   const [newFolderName, setNewFolderName] = useState("");
-  const [showNewFileDialog, setShowNewFileDialog] = useState(false);
+  const [showNewFileDialogState, setShowNewFileDialogState] = useState(false);
   const [newFileName, setNewFileName] = useState("");
+  const [createTargetPath, setCreateTargetPath] = useState<string | null>(null);
   const [fileNameError, setFileNameError] = useState<string | null>(null);
   const [showOverwriteConfirm, setShowOverwriteConfirm] = useState(false);
   const [overwriteTarget, setOverwriteTarget] = useState<string | null>(null);
@@ -80,34 +117,24 @@ export const useSftpPaneDialogs = ({
   const [isRenaming, setIsRenaming] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
 
+  // Refs for values accessed inside useCallback to avoid stale closures
+  const newFolderNameRef = useRef(newFolderName);
+  newFolderNameRef.current = newFolderName;
+  const newFileNameRef = useRef(newFileName);
+  newFileNameRef.current = newFileName;
+  const createTargetPathRef = useRef(createTargetPath);
+  createTargetPathRef.current = createTargetPath;
+  const renameTargetRef = useRef(renameTarget);
+  renameTargetRef.current = renameTarget;
+  const renameNameRef = useRef(renameName);
+  renameNameRef.current = renameName;
+  const deleteTargetsRef = useRef(deleteTargets);
+  deleteTargetsRef.current = deleteTargets;
+  const paneRef = useRef(pane);
+  paneRef.current = pane;
+
   const validateFileName = useCallback(
     (name: string): string | null => {
-      const INVALID_FILENAME_CHARS = /[/\\:*?"<>|]/;
-      const RESERVED_NAMES = new Set([
-        "CON",
-        "PRN",
-        "AUX",
-        "NUL",
-        "COM1",
-        "COM2",
-        "COM3",
-        "COM4",
-        "COM5",
-        "COM6",
-        "COM7",
-        "COM8",
-        "COM9",
-        "LPT1",
-        "LPT2",
-        "LPT3",
-        "LPT4",
-        "LPT5",
-        "LPT6",
-        "LPT7",
-        "LPT8",
-        "LPT9",
-      ]);
-
       const trimmed = name.trim();
       if (!trimmed) return null;
 
@@ -145,22 +172,29 @@ export const useSftpPaneDialogs = ({
     return `untitled_${Date.now()}.txt`;
   }, []);
 
-  const handleCreateFolder = async () => {
-    if (!newFolderName.trim() || isCreating) return;
+  const handleCreateFolder = useCallback(async () => {
+    if (!newFolderNameRef.current.trim() || isCreating) return;
     setIsCreating(true);
     try {
-      await onCreateDirectory(newFolderName.trim());
-      setShowNewFolderDialog(false);
+      if (createTargetPathRef.current) {
+        await onCreateDirectoryAtPath(createTargetPathRef.current, newFolderNameRef.current.trim());
+      } else {
+        await onCreateDirectory(newFolderNameRef.current.trim());
+      }
+      const affectedPath = createTargetPathRef.current ?? paneRef.current.connection?.currentPath;
+      onMutateSuccess?.(affectedPath ? [affectedPath] : undefined);
+      setShowNewFolderDialogState(false);
+      setCreateTargetPath(null);
       setNewFolderName("");
-    } catch {
-      /* Error handling */
+    } catch (err) {
+      logger.warn("Failed to create folder", err);
     } finally {
       setIsCreating(false);
     }
-  };
+  }, [isCreating, onCreateDirectory, onCreateDirectoryAtPath, onMutateSuccess]);
 
-  const handleCreateFile = async (forceOverwrite = false) => {
-    const trimmedName = newFileName.trim();
+  const handleCreateFile = useCallback(async (forceOverwrite = false) => {
+    const trimmedName = newFileNameRef.current.trim();
     if (!trimmedName || isCreatingFile) return;
 
     const error = validateFileName(trimmedName);
@@ -169,8 +203,9 @@ export const useSftpPaneDialogs = ({
       return;
     }
 
-    if (!forceOverwrite) {
-      const existingFile = pane.files.find(
+    const currentPane = paneRef.current;
+    if (!forceOverwrite && (!createTargetPathRef.current || createTargetPathRef.current === currentPane.connection?.currentPath)) {
+      const existingFile = currentPane.files.find(
         (f) =>
           f.name.toLowerCase() === trimmedName.toLowerCase() && f.type === "file",
       );
@@ -183,59 +218,112 @@ export const useSftpPaneDialogs = ({
 
     setIsCreatingFile(true);
     try {
-      await onCreateFile(trimmedName);
-      setShowNewFileDialog(false);
+      if (createTargetPathRef.current) {
+        await onCreateFileAtPath(createTargetPathRef.current, trimmedName);
+      } else {
+        await onCreateFile(trimmedName);
+      }
+      const affectedPath = createTargetPathRef.current ?? paneRef.current.connection?.currentPath;
+      onMutateSuccess?.(affectedPath ? [affectedPath] : undefined);
+      setShowNewFileDialogState(false);
       setShowOverwriteConfirm(false);
       setOverwriteTarget(null);
+      setCreateTargetPath(null);
       setNewFileName("");
       setFileNameError(null);
-    } catch {
-      /* Error handling */
+    } catch (err) {
+      logger.warn("Failed to create file", err);
     } finally {
       setIsCreatingFile(false);
     }
-  };
+  }, [isCreatingFile, validateFileName, onCreateFile, onCreateFileAtPath, onMutateSuccess]);
 
-  const handleConfirmOverwrite = async () => {
+  const handleConfirmOverwrite = useCallback(async () => {
     await handleCreateFile(true);
-  };
+  }, [handleCreateFile]);
 
-  const handleRename = async () => {
-    if (!renameTarget || !renameName.trim() || isRenaming) return;
+  const handleRename = useCallback(async () => {
+    if (!renameTargetRef.current || !renameNameRef.current.trim() || isRenaming) return;
     setIsRenaming(true);
     try {
-      await onRenameFile(renameTarget, renameName.trim());
+      // renameTarget is always a full path; use the path-aware variant
+      await onRenameFileAtPath(renameTargetRef.current, renameNameRef.current.trim());
+      onMutateSuccess?.([getParentPath(renameTargetRef.current)]);
       setShowRenameDialog(false);
       setRenameTarget(null);
       setRenameName("");
-    } catch {
-      /* Error handling */
+    } catch (err) {
+      logger.warn("Failed to rename file", err);
     } finally {
       setIsRenaming(false);
     }
-  };
+  }, [isRenaming, onRenameFileAtPath, onMutateSuccess]);
 
-  const handleDelete = async () => {
-    if (deleteTargets.length === 0 || isDeleting) return;
+  const handleDelete = useCallback(async () => {
+    if (deleteTargetsRef.current.length === 0 || isDeleting) return;
     setIsDeleting(true);
     try {
-      await onDeleteFiles(deleteTargets);
+      // deleteTargets are full paths; group by parent dir and use path-aware variant
+      const byDir = new Map<string, string[]>();
+      for (const fullPath of deleteTargetsRef.current) {
+        const dir = getParentPath(fullPath);
+        const name = getFileName(fullPath);
+        const list = byDir.get(dir) ?? [];
+        list.push(name);
+        byDir.set(dir, list);
+      }
+      const connectionId = paneRef.current.connection?.id;
+      if (!connectionId) {
+        throw new Error("Pane connection is no longer available");
+      }
+      for (const [dir, names] of byDir) {
+        await onDeleteFilesAtPath(connectionId, dir, names);
+      }
+      onMutateSuccess?.(Array.from(byDir.keys()));
       setShowDeleteConfirm(false);
       setDeleteTargets([]);
       onClearSelection();
-    } catch {
-      /* Error handling */
+    } catch (err) {
+      logger.warn("Failed to delete files", err);
     } finally {
       setIsDeleting(false);
     }
-  };
+  }, [isDeleting, onDeleteFilesAtPath, onMutateSuccess, onClearSelection]);
 
-  const openRenameDialog = useCallback((name: string) => {
-    setRenameTarget(name);
-    setRenameName(name);
+  // entryPath is the full path; renameName is initialized to the basename
+  const openRenameDialog = useCallback((entryPath: string) => {
+    setRenameTarget(entryPath);
+    setRenameName(getFileName(entryPath) || entryPath);
     setShowRenameDialog(true);
   }, []);
 
+  const setShowNewFolderDialog = useCallback((open: boolean) => {
+    if (!open) {
+      setCreateTargetPath(null);
+    }
+    setShowNewFolderDialogState(open);
+  }, []);
+
+  const setShowNewFileDialog = useCallback((open: boolean) => {
+    if (!open) {
+      setCreateTargetPath(null);
+    }
+    setShowNewFileDialogState(open);
+  }, []);
+
+  const openNewFolderDialogAtPath = useCallback((path: string) => {
+    setCreateTargetPath(path);
+    setNewFolderName("");
+    setShowNewFolderDialogState(true);
+  }, []);
+
+  const openNewFileDialogAtPath = useCallback((path: string) => {
+    setCreateTargetPath(path);
+    setNewFileName("");
+    setFileNameError(null);
+    setShowNewFileDialogState(true);
+  }, []);
+
   const openDeleteConfirm = useCallback((names: string[]) => {
     setDeleteTargets(names);
     setShowDeleteConfirm(true);
@@ -244,9 +332,9 @@ export const useSftpPaneDialogs = ({
   return {
     showHostPicker,
     hostSearch,
-    showNewFolderDialog,
+    showNewFolderDialog: showNewFolderDialogState,
     newFolderName,
-    showNewFileDialog,
+    showNewFileDialog: showNewFileDialogState,
     newFileName,
     fileNameError,
     showOverwriteConfirm,
@@ -276,6 +364,8 @@ export const useSftpPaneDialogs = ({
     handleConfirmOverwrite,
     handleRename,
     handleDelete,
+    openNewFolderDialogAtPath,
+    openNewFileDialogAtPath,
     openRenameDialog,
     openDeleteConfirm,
     getNextUntitledName,

components/sftp/hooks/useSftpPaneDragAndSelect.ts

@@ -1,15 +1,20 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import type { SftpFileEntry } from "../../../types";
-import type { SftpPaneCallbacks, SftpDragCallbacks } from "../SftpContext";
+import type { SftpPaneCallbacks, SftpDragCallbacks, SftpTransferSource } from "../SftpContext";
 import { isNavigableDirectory } from "../index";
+import { joinPath } from "../../../application/state/sftp/utils";
 
 interface UseSftpPaneDragAndSelectParams {
   side: "left" | "right";
-  pane: { selectedFiles: Set<string> };
+  pane: {
+    selectedFiles: Set<string>;
+    connection?: { currentPath: string; id: string } | null;
+  };
   sortedDisplayFiles: SftpFileEntry[];
-  draggedFiles: { name: string; isDirectory: boolean; side: "left" | "right" }[] | null;
+  draggedFiles: (SftpTransferSource & { side: "left" | "right" })[] | null;
   onDragStart: SftpDragCallbacks["onDragStart"];
   onReceiveFromOtherPane: SftpPaneCallbacks["onReceiveFromOtherPane"];
+  onMoveEntriesToPath: SftpPaneCallbacks["onMoveEntriesToPath"];
   onUploadExternalFiles?: SftpPaneCallbacks["onUploadExternalFiles"];
   onOpenEntry: SftpPaneCallbacks["onOpenEntry"];
   onRangeSelect: SftpPaneCallbacks["onRangeSelect"];
@@ -38,6 +43,7 @@ export const useSftpPaneDragAndSelect = ({
   draggedFiles,
   onDragStart,
   onReceiveFromOtherPane,
+  onMoveEntriesToPath,
   onUploadExternalFiles,
   onOpenEntry,
   onRangeSelect,
@@ -49,17 +55,38 @@ export const useSftpPaneDragAndSelect = ({
   const lastSelectedIndexRef = useRef<number | null>(null);
 
   const selectedFilesRef = useRef(pane.selectedFiles);
+  selectedFilesRef.current = pane.selectedFiles;
   const sortedFilesRef = useRef(sortedDisplayFiles);
+  sortedFilesRef.current = sortedDisplayFiles;
+  const draggedFilesRef = useRef(draggedFiles);
+  draggedFilesRef.current = draggedFiles;
+  const onReceiveRef = useRef(onReceiveFromOtherPane);
+  onReceiveRef.current = onReceiveFromOtherPane;
+  const onMoveEntriesToPathRef = useRef(onMoveEntriesToPath);
+  onMoveEntriesToPathRef.current = onMoveEntriesToPath;
+  const onUploadRef = useRef(onUploadExternalFiles);
+  onUploadRef.current = onUploadExternalFiles;
 
   useEffect(() => {
-    selectedFilesRef.current = pane.selectedFiles;
-  }, [pane.selectedFiles]);
+    if (pane.selectedFiles.size === 0) {
+      lastSelectedIndexRef.current = null;
+    }
+  }, [pane.selectedFiles.size]);
 
-  useEffect(() => {
-    sortedFilesRef.current = sortedDisplayFiles;
-  }, [sortedDisplayFiles]);
+  const getSamePaneDragPaths = useCallback((): string[] | null => {
+    const dragged = draggedFilesRef.current;
+    if (!dragged || dragged.length === 0) return null;
+    if (dragged[0]?.side !== side) return null;
 
-  const handlePaneDragOver = (e: React.DragEvent) => {
+    const currentConnectionId = pane.connection?.id;
+    const paths = dragged
+      .filter((file) => file.sourceConnectionId === currentConnectionId && file.sourcePath)
+      .map((file) => joinPath(file.sourcePath!, file.name));
+
+    return paths.length > 0 ? paths : null;
+  }, [pane.connection?.id, side]);
+
+  const handlePaneDragOver = useCallback((e: React.DragEvent) => {
     const hasFiles = e.dataTransfer.types.includes("Files");
 
     if (hasFiles) {
@@ -69,38 +96,36 @@ export const useSftpPaneDragAndSelect = ({
       return;
     }
 
-    if (!draggedFiles || draggedFiles[0]?.side === side) return;
+    if (!draggedFilesRef.current || draggedFilesRef.current[0]?.side === side) return;
     e.preventDefault();
     e.dataTransfer.dropEffect = "copy";
     setIsDragOverPane(true);
-  };
+  }, [side]);
 
-  const handlePaneDragLeave = (e: React.DragEvent) => {
+  const handlePaneDragLeave = useCallback((e: React.DragEvent) => {
     const relatedTarget = e.relatedTarget as Node | null;
     if (relatedTarget && paneContainerRef.current?.contains(relatedTarget)) return;
     setIsDragOverPane(false);
     setDragOverEntry(null);
-  };
+  }, []);
 
-  const handlePaneDrop = async (e: React.DragEvent) => {
+  const handlePaneDrop = useCallback(async (e: React.DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragOverPane(false);
     setDragOverEntry(null);
 
-    if (draggedFiles && draggedFiles.length > 0) {
-      if (draggedFiles[0]?.side !== side) {
-        onReceiveFromOtherPane(
-          draggedFiles.map((f) => ({ name: f.name, isDirectory: f.isDirectory })),
-        );
+    if (draggedFilesRef.current && draggedFilesRef.current.length > 0) {
+      if (draggedFilesRef.current[0]?.side !== side) {
+        onReceiveRef.current(draggedFilesRef.current);
       }
       return;
     }
 
-    if (e.dataTransfer.items.length > 0 && onUploadExternalFiles) {
-      await onUploadExternalFiles(e.dataTransfer);
+    if (e.dataTransfer.items.length > 0 && onUploadRef.current) {
+      await onUploadRef.current(e.dataTransfer);
     }
-  };
+  }, [side]);
 
   const handleFileDragStart = useCallback(
     (entry: SftpFileEntry, e: React.DragEvent) => {
@@ -108,55 +133,112 @@ export const useSftpPaneDragAndSelect = ({
         e.preventDefault();
         return;
       }
-      const selectedNames = Array.from(selectedFilesRef.current);
-      const files = selectedNames.includes(entry.name)
+      const selectedNames = new Set(selectedFilesRef.current);
+      const files = selectedNames.has(entry.name)
         ? sortedFilesRef.current
-          .filter((f) => selectedNames.includes(f.name))
+          .filter((f) => selectedNames.has(f.name))
           .map((f) => ({
             name: f.name,
             isDirectory: isNavigableDirectory(f),
+            sourceConnectionId: pane.connection?.id,
+            sourcePath: pane.connection?.currentPath,
             side,
           }))
         : [
           {
             name: entry.name,
             isDirectory: isNavigableDirectory(entry),
+            sourceConnectionId: pane.connection?.id,
+            sourcePath: pane.connection?.currentPath,
             side,
           },
         ];
-      e.dataTransfer.effectAllowed = "copy";
+      e.dataTransfer.effectAllowed = "copyMove";
       e.dataTransfer.setData("text/plain", files.map((f) => f.name).join("\n"));
       onDragStart(files, side);
     },
-    [onDragStart, side],
+    [onDragStart, pane.connection?.currentPath, pane.connection?.id, side],
   );
 
   const handleEntryDragOver = useCallback(
     (entry: SftpFileEntry, e: React.DragEvent) => {
-      if (!draggedFiles || draggedFiles[0]?.side === side) return;
-      if (isNavigableDirectory(entry) && entry.name !== "..") {
+      const samePaneDragPaths = getSamePaneDragPaths();
+      if (samePaneDragPaths && isNavigableDirectory(entry) && entry.name !== "..") {
         e.preventDefault();
         e.stopPropagation();
+        e.dataTransfer.dropEffect = "move";
+        setDragOverEntry(entry.name);
+        return;
+      }
+
+      // Handle cross-pane internal drag
+      if (draggedFilesRef.current && draggedFilesRef.current[0]?.side !== side) {
+        if (isNavigableDirectory(entry) && entry.name !== "..") {
+          e.preventDefault();
+          e.stopPropagation();
+          setDragOverEntry(entry.name);
+        }
+        return;
+      }
+      // Handle external file drag (from OS file explorer)
+      const hasFiles = e.dataTransfer.types.includes("Files");
+      if (hasFiles && isNavigableDirectory(entry) && entry.name !== "..") {
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer.dropEffect = "copy";
         setDragOverEntry(entry.name);
       }
     },
-    [draggedFiles, side],
+    [getSamePaneDragPaths, side],
   );
 
   const handleEntryDrop = useCallback(
-    (entry: SftpFileEntry, e: React.DragEvent) => {
-      if (!draggedFiles || draggedFiles[0]?.side === side) return;
-      if (isNavigableDirectory(entry) && entry.name !== "..") {
+    async (entry: SftpFileEntry, e: React.DragEvent) => {
+      const samePaneDragPaths = getSamePaneDragPaths();
+      if (samePaneDragPaths && isNavigableDirectory(entry) && entry.name !== "..") {
         e.preventDefault();
         e.stopPropagation();
         setDragOverEntry(null);
         setIsDragOverPane(false);
-        onReceiveFromOtherPane(
-          draggedFiles.map((f) => ({ name: f.name, isDirectory: f.isDirectory })),
-        );
+        const targetPath = pane.connection?.currentPath
+          ? joinPath(pane.connection.currentPath, entry.name)
+          : undefined;
+        if (targetPath) {
+          await onMoveEntriesToPathRef.current(samePaneDragPaths, targetPath);
+        }
+        return;
+      }
+
+      // Handle cross-pane internal drag
+      if (draggedFilesRef.current && draggedFilesRef.current[0]?.side !== side) {
+        if (isNavigableDirectory(entry) && entry.name !== "..") {
+          e.preventDefault();
+          e.stopPropagation();
+          setDragOverEntry(null);
+          setIsDragOverPane(false);
+          const targetPath = pane.connection?.currentPath
+            ? joinPath(pane.connection.currentPath, entry.name)
+            : undefined;
+          onReceiveRef.current(
+            draggedFilesRef.current.map((file) => ({ ...file, targetPath })),
+          );
+        }
+        return;
+      }
+      // Handle external file drop on a directory entry
+      const hasFiles = e.dataTransfer.types.includes("Files");
+      if (hasFiles && isNavigableDirectory(entry) && entry.name !== "..") {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragOverEntry(null);
+        setIsDragOverPane(false);
+        if (onUploadRef.current && pane.connection?.currentPath) {
+          const targetPath = joinPath(pane.connection.currentPath, entry.name);
+          void onUploadRef.current(e.dataTransfer, targetPath);
+        }
       }
     },
-    [draggedFiles, onReceiveFromOtherPane, side],
+    [getSamePaneDragPaths, side, pane.connection?.currentPath],
   );
 
   const handleRowSelect = useCallback(
@@ -165,7 +247,7 @@ export const useSftpPaneDragAndSelect = ({
       if (e.shiftKey && lastSelectedIndexRef.current !== null) {
         const start = Math.min(lastSelectedIndexRef.current, index);
         const end = Math.max(lastSelectedIndexRef.current, index);
-        const selectedFileNames = sortedDisplayFiles
+        const selectedFileNames = sortedFilesRef.current
           .slice(start, end + 1)
           .filter((f) => f.name !== "..")
           .map((f) => f.name);
@@ -175,7 +257,7 @@ export const useSftpPaneDragAndSelect = ({
         lastSelectedIndexRef.current = index;
       }
     },
-    [onRangeSelect, onToggleSelection, sortedDisplayFiles],
+    [onRangeSelect, onToggleSelection],
   );
 
   const handleRowOpen = useCallback(

components/sftp/hooks/useSftpPaneFiles.ts

@@ -2,13 +2,14 @@ import { useMemo } from "react";
 import type { SftpFileEntry } from "../../../types";
 import type { SftpPane } from "../../../application/state/sftp/types";
 import type { SortField, SortOrder } from "../utils";
-import { filterHiddenFiles } from "../index";
+import { filterHiddenFiles, sortSftpEntries } from "../index";
 
 interface UseSftpPaneFilesParams {
   files: SftpFileEntry[];
   filter: string;
   connection: SftpPane["connection"] | null;
   showHiddenFiles: boolean;
+  enableListView: boolean;
   sortField: SortField;
   sortOrder: SortOrder;
 }
@@ -24,76 +25,62 @@ export const useSftpPaneFiles = ({
   filter,
   connection,
   showHiddenFiles,
+  enableListView,
   sortField,
   sortOrder,
 }: UseSftpPaneFilesParams): UseSftpPaneFilesResult => {
+  // Extract ".." once and process the remaining files through filter -> sort
+  // in fewer passes, instead of repeatedly filtering/finding ".." entries.
   const filteredFiles = useMemo(() => {
+    if (!enableListView) return [] as SftpFileEntry[];
     const term = filter.trim().toLowerCase();
     let nextFiles = filterHiddenFiles(files, showHiddenFiles);
     if (!term) return nextFiles;
     return nextFiles.filter(
       (f) => f.name === ".." || f.name.toLowerCase().includes(term),
     );
-  }, [files, filter, showHiddenFiles]);
+  }, [enableListView, files, filter, showHiddenFiles]);
+
+  const { displayFiles, sortedDisplayFiles } = useMemo(() => {
+    if (!connection || !enableListView) {
+      return { displayFiles: [] as SftpFileEntry[], sortedDisplayFiles: [] as SftpFileEntry[] };
+    }
 
-  const displayFiles = useMemo(() => {
-    if (!connection) return [];
     const isRootPath =
       connection.currentPath === "/" ||
       /^[A-Za-z]:[\\/]?$/.test(connection.currentPath);
-    if (isRootPath) return filteredFiles;
-    const parentEntry: SftpFileEntry = {
-      name: "..",
-      type: "directory",
-      size: 0,
-      sizeFormatted: "--",
-      lastModified: 0,
-      lastModifiedFormatted: "--",
-    };
-    return [parentEntry, ...filteredFiles.filter((f) => f.name !== "..")];
-  }, [connection, filteredFiles]);
 
-  const sortedDisplayFiles = useMemo(() => {
-    if (!displayFiles.length) return displayFiles;
-
-    const parentEntry = displayFiles.find((f) => f.name === "..");
-    const otherFiles = displayFiles.filter((f) => f.name !== "..");
-
-    const sorted = [...otherFiles].sort((a, b) => {
-      if (sortField !== "type") {
-        if (a.type === "directory" && b.type !== "directory") return -1;
-        if (a.type !== "directory" && b.type === "directory") return 1;
+    // Split ".." from other files in a single pass
+    let parentEntry: SftpFileEntry | undefined;
+    const otherFiles: SftpFileEntry[] = [];
+    for (const f of filteredFiles) {
+      if (f.name === "..") {
+        parentEntry = f;
+      } else {
+        otherFiles.push(f);
       }
+    }
 
-      let cmp = 0;
-      switch (sortField) {
-        case "name":
-          cmp = a.name.localeCompare(b.name);
-          break;
-        case "size":
-          cmp = (a.size || 0) - (b.size || 0);
-          break;
-        case "modified":
-          cmp = (a.lastModified || 0) - (b.lastModified || 0);
-          break;
-        case "type": {
-          const extA =
-            a.type === "directory"
-              ? "folder"
-              : a.name.split(".").pop()?.toLowerCase() || "";
-          const extB =
-            b.type === "directory"
-              ? "folder"
-              : b.name.split(".").pop()?.toLowerCase() || "";
-          cmp = extA.localeCompare(extB);
-          break;
-        }
-      }
-      return sortOrder === "asc" ? cmp : -cmp;
-    });
+    // For non-root paths, always ensure a ".." entry exists
+    if (!isRootPath && !parentEntry) {
+      parentEntry = {
+        name: "..",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: 0,
+        lastModifiedFormatted: "--",
+      };
+    }
 
-    return parentEntry ? [parentEntry, ...sorted] : sorted;
-  }, [displayFiles, sortField, sortOrder]);
+    const display = parentEntry ? [parentEntry, ...otherFiles] : otherFiles;
+    const sorted = otherFiles.length
+      ? sortSftpEntries(otherFiles, sortField, sortOrder)
+      : otherFiles;
+    const sortedDisplay = parentEntry ? [parentEntry, ...sorted] : sorted;
+
+    return { displayFiles: display, sortedDisplayFiles: sortedDisplay };
+  }, [connection, enableListView, filteredFiles, sortField, sortOrder]);
 
   return { filteredFiles, displayFiles, sortedDisplayFiles };
 };

components/sftp/hooks/useSftpPanePath.ts

@@ -1,11 +1,12 @@
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import type { SftpFileEntry } from "../../../types";
 import type { SftpPane } from "../../../application/state/sftp/types";
-import { isNavigableDirectory } from "../index";
+import { filterHiddenFiles, isNavigableDirectory } from "../index";
 
 interface UseSftpPanePathParams {
   connection: SftpPane["connection"] | null;
-  filteredFiles: SftpFileEntry[];
+  files: SftpFileEntry[];
+  showHiddenFiles: boolean;
   onNavigateTo: (path: string) => void;
 }
 
@@ -28,7 +29,8 @@ interface UseSftpPanePathResult {
 
 export const useSftpPanePath = ({
   connection,
-  filteredFiles,
+  files,
+  showHiddenFiles,
   onNavigateTo,
 }: UseSftpPanePathParams): UseSftpPanePathResult => {
   const [isEditingPath, setIsEditingPath] = useState(false);
@@ -43,7 +45,7 @@ export const useSftpPanePath = ({
     const currentValue = editingPathValue.trim().toLowerCase();
     const suggestions: { path: string; type: "folder" | "history" }[] = [];
 
-    const folders = filteredFiles.filter(
+    const folders = filterHiddenFiles(files, showHiddenFiles).filter(
       (f) => isNavigableDirectory(f) && f.name !== "..",
     );
     folders.forEach((f) => {
@@ -70,7 +72,7 @@ export const useSftpPanePath = ({
     });
 
     return suggestions.slice(0, 8);
-  }, [connection, editingPathValue, filteredFiles, isEditingPath]);
+  }, [connection, editingPathValue, files, isEditingPath, showHiddenFiles]);
 
   const handlePathDoubleClick = () => {
     if (!connection) return;

components/sftp/hooks/useSftpPaneSorting.ts

@@ -13,10 +13,10 @@ export const useSftpPaneSorting = (): UseSftpPaneSortingResult => {
   const [sortField, setSortField] = useState<SortField>("name");
   const [sortOrder, setSortOrder] = useState<SortOrder>("asc");
   const [columnWidths, setColumnWidths] = useState<ColumnWidths>({
-    name: 45,
-    modified: 25,
-    size: 15,
-    type: 15,
+    name: 56,
+    modified: 28,
+    size: 7,
+    type: 9,
   });
 
   const resizingRef = useRef<{
@@ -34,24 +34,48 @@ export const useSftpPaneSorting = (): UseSftpPaneSortingResult => {
     }
   };
 
-  const handleResizeMove = useCallback((e: MouseEvent) => {
+  const rafIdRef = useRef<number | null>(null);
+  const lastClientXRef = useRef(0);
+
+  const applyColumnWidth = useCallback(() => {
     if (!resizingRef.current) return;
-    const diff = e.clientX - resizingRef.current.startX;
+    const { field, startX, startWidth } = resizingRef.current;
+    const diff = lastClientXRef.current - startX;
+    const limits: Record<keyof ColumnWidths, { min: number; max: number }> = {
+      name: { min: 36, max: 78 },
+      modified: { min: 18, max: 42 },
+      size: { min: 5, max: 16 },
+      type: { min: 6, max: 18 },
+    };
+    const { min, max } = limits[field];
     const newWidth = Math.max(
-      10,
-      Math.min(60, resizingRef.current.startWidth + diff / 5),
+      min,
+      Math.min(max, startWidth + diff / 8),
     );
     setColumnWidths((prev) => ({
       ...prev,
-      [resizingRef.current!.field]: newWidth,
+      [field]: newWidth,
     }));
   }, []);
 
+  const handleResizeMove = useCallback((e: MouseEvent) => {
+    if (!resizingRef.current) return;
+    lastClientXRef.current = e.clientX;
+    if (rafIdRef.current !== null) return;
+    rafIdRef.current = requestAnimationFrame(() => {
+      rafIdRef.current = null;
+      applyColumnWidth();
+    });
+  }, [applyColumnWidth]);
+
   const handleResizeEnd = useCallback(() => {
+    if (rafIdRef.current !== null) cancelAnimationFrame(rafIdRef.current);
+    applyColumnWidth();
+    rafIdRef.current = null;
     resizingRef.current = null;
     document.removeEventListener("mousemove", handleResizeMove);
     document.removeEventListener("mouseup", handleResizeEnd);
-  }, [handleResizeMove]);
+  }, [applyColumnWidth, handleResizeMove]);
 
   const handleResizeStart = (
     field: keyof ColumnWidths,
@@ -59,6 +83,7 @@ export const useSftpPaneSorting = (): UseSftpPaneSortingResult => {
   ) => {
     e.preventDefault();
     e.stopPropagation();
+    lastClientXRef.current = e.clientX;
     resizingRef.current = {
       field,
       startX: e.clientX,

components/sftp/hooks/useSftpPaneVirtualList.ts

@@ -3,6 +3,7 @@ import type { SftpFileEntry } from "../../../types";
 
 interface UseSftpPaneVirtualListParams {
   isActive: boolean;
+  enabled?: boolean;
   sortedDisplayFiles: SftpFileEntry[];
 }
 
@@ -17,6 +18,7 @@ interface UseSftpPaneVirtualListResult {
 
 export const useSftpPaneVirtualList = ({
   isActive,
+  enabled = true,
   sortedDisplayFiles,
 }: UseSftpPaneVirtualListParams): UseSftpPaneVirtualListResult => {
   const fileListRef = useRef<HTMLDivElement>(null);
@@ -27,7 +29,7 @@ export const useSftpPaneVirtualList = ({
 
   useLayoutEffect(() => {
     const container = fileListRef.current;
-    if (!container || !isActive) return;
+    if (!container || !isActive || !enabled) return;
     const update = () => setViewportHeight(container.clientHeight);
     update();
     const raf = window.requestAnimationFrame(update);
@@ -37,11 +39,11 @@ export const useSftpPaneVirtualList = ({
       resizeObserver.disconnect();
       window.cancelAnimationFrame(raf);
     };
-  }, [isActive, sortedDisplayFiles.length]);
+  }, [enabled, isActive, sortedDisplayFiles.length]);
 
   useLayoutEffect(() => {
     const container = fileListRef.current;
-    if (!container || !isActive || sortedDisplayFiles.length === 0) return;
+    if (!container || !isActive || !enabled || sortedDisplayFiles.length === 0) return;
     const raf = window.requestAnimationFrame(() => {
       const rowElement = container.querySelector(
         '[data-sftp-row="true"]',
@@ -53,7 +55,7 @@ export const useSftpPaneVirtualList = ({
       }
     });
     return () => window.cancelAnimationFrame(raf);
-  }, [isActive, rowHeight, sortedDisplayFiles.length]);
+  }, [enabled, isActive, rowHeight, sortedDisplayFiles.length]);
 
   useEffect(() => {
     return () => {
@@ -65,7 +67,7 @@ export const useSftpPaneVirtualList = ({
 
   const handleFileListScroll = useCallback(
     (e: React.UIEvent<HTMLDivElement>) => {
-      if (!isActive) return;
+      if (!isActive || !enabled) return;
       const nextTop = e.currentTarget.scrollTop;
       if (scrollFrameRef.current !== null) return;
       scrollFrameRef.current = window.requestAnimationFrame(() => {
@@ -73,12 +75,12 @@ export const useSftpPaneVirtualList = ({
         setScrollTop(nextTop);
       });
     },
-    [isActive],
+    [enabled, isActive],
   );
 
   const { shouldVirtualize, totalHeight, visibleRows } = useMemo(() => {
     const overscan = 6;
-    const canVirtualize = isActive && viewportHeight > 0 && rowHeight > 0;
+    const canVirtualize = enabled && isActive && viewportHeight > 0 && rowHeight > 0;
     const shouldVirtualizeLocal = canVirtualize && sortedDisplayFiles.length > 50;
     const totalHeightLocal = shouldVirtualizeLocal
       ? sortedDisplayFiles.length * rowHeight
@@ -111,7 +113,7 @@ export const useSftpPaneVirtualList = ({
       totalHeight: totalHeightLocal,
       visibleRows: visibleRowsLocal,
     };
-  }, [isActive, rowHeight, scrollTop, sortedDisplayFiles, viewportHeight]);
+  }, [enabled, isActive, rowHeight, scrollTop, sortedDisplayFiles, viewportHeight]);
 
   return {
     fileListRef,

components/sftp/hooks/useSftpTreeSelectionStore.ts

@@ -0,0 +1,153 @@
+import { useCallback, useSyncExternalStore } from "react";
+
+export interface SftpTreeSelectionItem {
+  path: string;
+  name: string;
+  isDirectory: boolean;
+  sourcePath: string;
+}
+
+interface SftpTreeSelectionState {
+  visibleItems: SftpTreeSelectionItem[];
+  visibleItemsByPath: Map<string, SftpTreeSelectionItem>;
+  visibleIndexByPath: Map<string, number>;
+  visiblePathsSet: Set<string>;
+  selectedPaths: Set<string>;
+}
+
+const EMPTY_PATHS = new Set<string>();
+
+const EMPTY_STATE: SftpTreeSelectionState = {
+  visibleItems: [],
+  visibleItemsByPath: new Map(),
+  visibleIndexByPath: new Map(),
+  visiblePathsSet: new Set(),
+  selectedPaths: EMPTY_PATHS,
+};
+
+type Listener = () => void;
+
+const paneStates = new Map<string, SftpTreeSelectionState>();
+const paneListeners = new Map<string, Set<Listener>>();
+
+const notifyPaneListeners = (paneId: string) => {
+  paneListeners.get(paneId)?.forEach((listener) => listener());
+};
+
+const getPaneState = (paneId: string): SftpTreeSelectionState =>
+  paneStates.get(paneId) ?? EMPTY_STATE;
+
+const setPaneState = (
+  paneId: string,
+  updater: (state: SftpTreeSelectionState) => SftpTreeSelectionState,
+) => {
+  const prev = getPaneState(paneId);
+  const next = updater(prev);
+  if (next === prev) return;
+  if (next.visibleItems.length === 0 && next.selectedPaths.size === 0) {
+    paneStates.delete(paneId);
+  } else {
+    paneStates.set(paneId, next);
+  }
+  notifyPaneListeners(paneId);
+};
+
+export const sftpTreeSelectionStore = {
+  getPaneState,
+
+  getSelectedItems: (paneId: string): SftpTreeSelectionItem[] => {
+    const state = getPaneState(paneId);
+    const result: SftpTreeSelectionItem[] = [];
+    for (const path of state.selectedPaths) {
+      const item = state.visibleItemsByPath.get(path);
+      if (item) result.push(item);
+    }
+    return result;
+  },
+
+  setVisibleItems: (paneId: string, visibleItems: SftpTreeSelectionItem[]) => {
+    const visibleItemsByPath = new Map<string, SftpTreeSelectionItem>();
+    const visibleIndexByPath = new Map<string, number>();
+    const visiblePathsSet = new Set(visibleItems.map((item) => item.path));
+    visibleItems.forEach((item, index) => {
+      visibleItemsByPath.set(item.path, item);
+      visibleIndexByPath.set(item.path, index);
+    });
+    setPaneState(paneId, (state) => {
+      const newSelected = new Set([...state.selectedPaths].filter((p) => visiblePathsSet.has(p)));
+      const changed =
+        newSelected.size !== state.selectedPaths.size ||
+        [...newSelected].some((p) => !state.selectedPaths.has(p));
+      return {
+        visibleItems,
+        visibleItemsByPath,
+        visibleIndexByPath,
+        visiblePathsSet,
+        selectedPaths: changed ? newSelected : state.selectedPaths,
+      };
+    });
+  },
+
+  setSelection: (paneId: string, selectedPaths: Iterable<string>) => {
+    setPaneState(paneId, (state) => ({
+      ...state,
+      selectedPaths: new Set(Array.from(selectedPaths).filter((path) => state.visiblePathsSet.has(path))),
+    }));
+  },
+
+  clearSelection: (paneId: string) => {
+    setPaneState(paneId, (state) => ({ ...state, selectedPaths: EMPTY_PATHS }));
+  },
+
+  clearAllExcept: (paneIdsToKeep?: Iterable<string>) => {
+    const keep = new Set(paneIdsToKeep ?? []);
+    Array.from(paneStates.keys()).forEach((paneId) => {
+      if (keep.has(paneId)) return;
+      setPaneState(paneId, (state) => {
+        if (state.selectedPaths.size === 0) return state;
+        return { ...state, selectedPaths: EMPTY_PATHS };
+      });
+    });
+  },
+
+  selectAllVisible: (paneId: string) => {
+    setPaneState(paneId, (state) => ({
+      ...state,
+      selectedPaths: new Set(
+        state.visibleItems.map((item) => item.path),
+      ),
+    }));
+  },
+
+  clearPane: (paneId: string) => {
+    if (!paneStates.has(paneId)) return;
+    paneStates.delete(paneId);
+    notifyPaneListeners(paneId);
+  },
+
+  subscribe: (paneId: string, listener: Listener) => {
+    const listeners = paneListeners.get(paneId) ?? new Set<Listener>();
+    listeners.add(listener);
+    paneListeners.set(paneId, listeners);
+    return () => {
+      const current = paneListeners.get(paneId);
+      if (!current) return;
+      current.delete(listener);
+      if (current.size === 0) {
+        paneListeners.delete(paneId);
+      }
+    };
+  },
+};
+
+export const useSftpTreeSelectionState = (paneId: string): SftpTreeSelectionState => {
+  const subscribe = useCallback(
+    (listener: () => void) => sftpTreeSelectionStore.subscribe(paneId, listener),
+    [paneId],
+  );
+  return useSyncExternalStore(
+    subscribe,
+    () => sftpTreeSelectionStore.getPaneState(paneId),
+    () => sftpTreeSelectionStore.getPaneState(paneId),
+  );
+};

components/sftp/hooks/useSftpViewFileOps.ts

@@ -1,7 +1,7 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useRef, useState } from "react";
 import type { MutableRefObject } from "react";
-import type { RemoteFile, SftpFileEntry, SftpFilenameEncoding } from "../../../types";
-import { joinPath as joinFsPath } from "../../../application/state/sftp/utils";
+import type { SftpFileEntry, SftpFilenameEncoding } from "../../../types";
+import { getParentPath, joinPath as joinFsPath } from "../../../application/state/sftp/utils";
 import type { SftpStateApi } from "../../../application/state/useSftpState";
 import { logger } from "../../../lib/logger";
 import { toast } from "../../ui/toast";
@@ -21,9 +21,6 @@ interface UseSftpViewFileOpsParams {
     systemApp?: SystemAppInfo,
   ) => void;
   t: (key: string, vars?: Record<string, string | number>) => string;
-  listSftp?: (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => Promise<RemoteFile[]>;
-  mkdirLocal?: (path: string) => Promise<unknown>;
-  deleteLocalFile?: (path: string) => Promise<unknown>;
   showSaveDialog?: (defaultPath: string, filters?: Array<{ name: string; extensions: string[] }>) => Promise<string | null>;
   selectDirectory?: (title?: string, defaultPath?: string) => Promise<string | null>;
   startStreamTransfer?: (
@@ -47,9 +44,9 @@ interface UseSftpViewFileOpsParams {
 }
 
 interface UseSftpViewFileOpsResult {
-  permissionsState: { file: SftpFileEntry; side: "left" | "right" } | null;
+  permissionsState: { file: SftpFileEntry; side: "left" | "right"; fullPath: string } | null;
   setPermissionsState: React.Dispatch<
-    React.SetStateAction<{ file: SftpFileEntry; side: "left" | "right" } | null>
+    React.SetStateAction<{ file: SftpFileEntry; side: "left" | "right"; fullPath: string } | null>
   >;
   showTextEditor: boolean;
   setShowTextEditor: React.Dispatch<React.SetStateAction<boolean>>;
@@ -89,20 +86,20 @@ interface UseSftpViewFileOpsResult {
     systemApp?: SystemAppInfo,
   ) => Promise<void>;
   handleSelectSystemApp: () => Promise<SystemAppInfo | null>;
-  onEditPermissionsLeft: (file: SftpFileEntry) => void;
-  onEditPermissionsRight: (file: SftpFileEntry) => void;
-  onOpenEntryLeft: (entry: SftpFileEntry) => void;
-  onOpenEntryRight: (entry: SftpFileEntry) => void;
-  onEditFileLeft: (file: SftpFileEntry) => void;
-  onEditFileRight: (file: SftpFileEntry) => void;
-  onOpenFileLeft: (file: SftpFileEntry) => void;
-  onOpenFileRight: (file: SftpFileEntry) => void;
-  onOpenFileWithLeft: (file: SftpFileEntry) => void;
-  onOpenFileWithRight: (file: SftpFileEntry) => void;
-  onDownloadFileLeft: (file: SftpFileEntry) => void;
-  onDownloadFileRight: (file: SftpFileEntry) => void;
-  onUploadExternalFilesLeft: (dataTransfer: DataTransfer) => void;
-  onUploadExternalFilesRight: (dataTransfer: DataTransfer) => void;
+  onEditPermissionsLeft: (file: SftpFileEntry, fullPath?: string) => void;
+  onEditPermissionsRight: (file: SftpFileEntry, fullPath?: string) => void;
+  onOpenEntryLeft: (entry: SftpFileEntry, fullPath?: string) => void;
+  onOpenEntryRight: (entry: SftpFileEntry, fullPath?: string) => void;
+  onEditFileLeft: (file: SftpFileEntry, fullPath?: string) => void;
+  onEditFileRight: (file: SftpFileEntry, fullPath?: string) => void;
+  onOpenFileLeft: (file: SftpFileEntry, fullPath?: string) => void;
+  onOpenFileRight: (file: SftpFileEntry, fullPath?: string) => void;
+  onOpenFileWithLeft: (file: SftpFileEntry, fullPath?: string) => void;
+  onOpenFileWithRight: (file: SftpFileEntry, fullPath?: string) => void;
+  onDownloadFileLeft: (file: SftpFileEntry, fullPath?: string) => void;
+  onDownloadFileRight: (file: SftpFileEntry, fullPath?: string) => void;
+  onUploadExternalFilesLeft: (dataTransfer: DataTransfer, targetPath?: string) => void;
+  onUploadExternalFilesRight: (dataTransfer: DataTransfer, targetPath?: string) => void;
 }
 
 export const useSftpViewFileOps = ({
@@ -112,9 +109,6 @@ export const useSftpViewFileOps = ({
   getOpenerForFileRef,
   setOpenerForExtension,
   t,
-  listSftp,
-  mkdirLocal,
-  deleteLocalFile,
   showSaveDialog,
   selectDirectory,
   startStreamTransfer,
@@ -123,6 +117,7 @@ export const useSftpViewFileOps = ({
   const [permissionsState, setPermissionsState] = useState<{
     file: SftpFileEntry;
     side: "left" | "right";
+    fullPath: string;
   } | null>(null);
 
   const [showTextEditor, setShowTextEditor] = useState(false);
@@ -145,27 +140,49 @@ export const useSftpViewFileOps = ({
     fullPath: string;
   } | null>(null);
 
+  // Refs for frequently-changing state used inside stable callbacks
+  const fileOpenerTargetRef = useRef(fileOpenerTarget);
+  fileOpenerTargetRef.current = fileOpenerTarget;
+  const textEditorTargetRef = useRef(textEditorTarget);
+  textEditorTargetRef.current = textEditorTarget;
+
   const onEditPermissionsLeft = useCallback(
-    (file: SftpFileEntry) => setPermissionsState({ file, side: "left" }),
-    [],
+    (file: SftpFileEntry, fullPath?: string) => {
+      const pane = sftpRef.current.leftPane;
+      if (!pane.connection) return;
+      setPermissionsState({
+        file,
+        side: "left",
+        fullPath: fullPath ?? sftpRef.current.joinPath(pane.connection.currentPath, file.name),
+      });
+    },
+    [sftpRef],
   );
   const onEditPermissionsRight = useCallback(
-    (file: SftpFileEntry) => setPermissionsState({ file, side: "right" }),
-    [],
+    (file: SftpFileEntry, fullPath?: string) => {
+      const pane = sftpRef.current.rightPane;
+      if (!pane.connection) return;
+      setPermissionsState({
+        file,
+        side: "right",
+        fullPath: fullPath ?? sftpRef.current.joinPath(pane.connection.currentPath, file.name),
+      });
+    },
+    [sftpRef],
   );
 
   const handleEditFileForSide = useCallback(
-    async (side: "left" | "right", file: SftpFileEntry) => {
+    async (side: "left" | "right", file: SftpFileEntry, fullPath?: string) => {
       const pane = side === "left" ? sftpRef.current.leftPane : sftpRef.current.rightPane;
       if (!pane.connection) return;
 
-      const fullPath = sftpRef.current.joinPath(pane.connection.currentPath, file.name);
+      const resolvedFullPath = fullPath ?? sftpRef.current.joinPath(pane.connection.currentPath, file.name);
 
       try {
         setLoadingTextContent(true);
-        setTextEditorTarget({ file, side, fullPath, hostId: pane.connection.hostId });
+        setTextEditorTarget({ file, side, fullPath: resolvedFullPath, hostId: pane.connection.hostId });
 
-        const content = await sftpRef.current.readTextFile(side, fullPath);
+        const content = await sftpRef.current.readTextFile(side, resolvedFullPath);
 
         setTextEditorContent(content);
         setShowTextEditor(true);
@@ -180,22 +197,22 @@ export const useSftpViewFileOps = ({
   );
 
   const handleOpenFileForSide = useCallback(
-    async (side: "left" | "right", file: SftpFileEntry) => {
+    async (side: "left" | "right", file: SftpFileEntry, fullPath?: string) => {
       const pane = side === "left" ? sftpRef.current.leftPane : sftpRef.current.rightPane;
       if (!pane.connection) return;
 
-      const fullPath = sftpRef.current.joinPath(pane.connection.currentPath, file.name);
+      const resolvedFullPath = fullPath ?? sftpRef.current.joinPath(pane.connection.currentPath, file.name);
       const savedOpener = getOpenerForFileRef.current(file.name);
 
       if (savedOpener && savedOpener.openerType) {
         if (savedOpener.openerType === "builtin-editor") {
-          handleEditFileForSide(side, file);
+          handleEditFileForSide(side, file, resolvedFullPath);
           return;
         } else if (savedOpener.openerType === "system-app" && savedOpener.systemApp) {
           try {
             await sftpRef.current.downloadToTempAndOpen(
               side,
-              fullPath,
+              resolvedFullPath,
               file.name,
               savedOpener.systemApp.path,
               { enableWatch: autoSyncRef.current },
@@ -207,7 +224,7 @@ export const useSftpViewFileOps = ({
         }
       }
 
-      setFileOpenerTarget({ file, side, fullPath });
+      setFileOpenerTarget({ file, side, fullPath: resolvedFullPath });
       setShowFileOpenerDialog(true);
     },
     [sftpRef, handleEditFileForSide, getOpenerForFileRef, autoSyncRef],
@@ -215,23 +232,24 @@ export const useSftpViewFileOps = ({
 
   const handleFileOpenerSelect = useCallback(
     async (openerType: FileOpenerType, setAsDefault: boolean, systemApp?: SystemAppInfo) => {
-      if (!fileOpenerTarget) return;
+      const target = fileOpenerTargetRef.current;
+      if (!target) return;
 
       if (setAsDefault) {
-        const ext = getFileExtension(fileOpenerTarget.file.name);
+        const ext = getFileExtension(target.file.name);
         setOpenerForExtension(ext, openerType, systemApp);
       }
 
       setShowFileOpenerDialog(false);
 
       if (openerType === "builtin-editor") {
-        handleEditFileForSide(fileOpenerTarget.side, fileOpenerTarget.file);
+        handleEditFileForSide(target.side, target.file, target.fullPath);
       } else if (openerType === "system-app" && systemApp) {
         try {
           await sftpRef.current.downloadToTempAndOpen(
-            fileOpenerTarget.side,
-            fileOpenerTarget.fullPath,
-            fileOpenerTarget.file.name,
+            target.side,
+            target.fullPath,
+            target.file.name,
             systemApp.path,
             { enableWatch: autoSyncRef.current },
           );
@@ -242,7 +260,7 @@ export const useSftpViewFileOps = ({
 
       setFileOpenerTarget(null);
     },
-    [fileOpenerTarget, setOpenerForExtension, handleEditFileForSide, autoSyncRef, sftpRef],
+    [setOpenerForExtension, handleEditFileForSide, autoSyncRef, sftpRef],
   );
 
   const handleSelectSystemApp = useCallback(async (): Promise<SystemAppInfo | null> => {
@@ -255,7 +273,8 @@ export const useSftpViewFileOps = ({
 
   const handleSaveTextFile = useCallback(
     async (content: string) => {
-      if (!textEditorTarget) return;
+      const target = textEditorTargetRef.current;
+      if (!target) return;
 
       // Verify the SFTP connection hasn't switched to a different host.
       // We check hostId (not connectionId) because auto-reconnect after a
@@ -263,64 +282,64 @@ export const useSftpViewFileOps = ({
       // endpoint.  The auto-connect effect in SftpSidePanel blocks
       // host-switching while the editor is open, so a hostId mismatch here
       // reliably indicates a genuinely different endpoint.
-      const currentPane = textEditorTarget.side === "left"
+      const currentPane = target.side === "left"
         ? sftpRef.current.leftPane
         : sftpRef.current.rightPane;
-      if (textEditorTarget.hostId && currentPane.connection?.hostId !== textEditorTarget.hostId) {
+      if (target.hostId && currentPane.connection?.hostId !== target.hostId) {
         throw new Error("SFTP connection changed while editing — file not saved to prevent writing to wrong host");
       }
 
       await sftpRef.current.writeTextFile(
-        textEditorTarget.side,
-        textEditorTarget.fullPath,
+        target.side,
+        target.fullPath,
         content,
       );
     },
-    [textEditorTarget, sftpRef],
+    [sftpRef],
   );
 
   const onEditFileLeft = useCallback(
-    (file: SftpFileEntry) => handleEditFileForSide("left", file),
+    (file: SftpFileEntry, fullPath?: string) => handleEditFileForSide("left", file, fullPath),
     [handleEditFileForSide],
   );
   const onEditFileRight = useCallback(
-    (file: SftpFileEntry) => handleEditFileForSide("right", file),
+    (file: SftpFileEntry, fullPath?: string) => handleEditFileForSide("right", file, fullPath),
     [handleEditFileForSide],
   );
   const onOpenFileLeft = useCallback(
-    (file: SftpFileEntry) => handleOpenFileForSide("left", file),
+    (file: SftpFileEntry, fullPath?: string) => handleOpenFileForSide("left", file, fullPath),
     [handleOpenFileForSide],
   );
   const onOpenFileRight = useCallback(
-    (file: SftpFileEntry) => handleOpenFileForSide("right", file),
+    (file: SftpFileEntry, fullPath?: string) => handleOpenFileForSide("right", file, fullPath),
     [handleOpenFileForSide],
   );
 
   const handleOpenFileWithForSide = useCallback(
-    (side: "left" | "right", file: SftpFileEntry) => {
+    (side: "left" | "right", file: SftpFileEntry, fullPath?: string) => {
       const pane = side === "left" ? sftpRef.current.leftPane : sftpRef.current.rightPane;
       if (!pane.connection) return;
 
-      const fullPath = sftpRef.current.joinPath(pane.connection.currentPath, file.name);
-      setFileOpenerTarget({ file, side, fullPath });
+      const resolvedFullPath = fullPath ?? sftpRef.current.joinPath(pane.connection.currentPath, file.name);
+      setFileOpenerTarget({ file, side, fullPath: resolvedFullPath });
       setShowFileOpenerDialog(true);
     },
     [sftpRef],
   );
 
   const onOpenFileWithLeft = useCallback(
-    (file: SftpFileEntry) => handleOpenFileWithForSide("left", file),
+    (file: SftpFileEntry, fullPath?: string) => handleOpenFileWithForSide("left", file, fullPath),
     [handleOpenFileWithForSide],
   );
   const onOpenFileWithRight = useCallback(
-    (file: SftpFileEntry) => handleOpenFileWithForSide("right", file),
+    (file: SftpFileEntry, fullPath?: string) => handleOpenFileWithForSide("right", file, fullPath),
     [handleOpenFileWithForSide],
   );
 
   const handleUploadExternalFilesForSide = useCallback(
-    async (side: "left" | "right", dataTransfer: DataTransfer) => {
+    async (side: "left" | "right", dataTransfer: DataTransfer, targetPath?: string) => {
       try {
-        const results = await sftpRef.current.uploadExternalFiles(side, dataTransfer);
+        const results = await sftpRef.current.uploadExternalFiles(side, dataTransfer, targetPath);
 
         // Check if upload was cancelled
         if (results.some((r) => r.cancelled)) {
@@ -359,21 +378,21 @@ export const useSftpViewFileOps = ({
   );
 
   const onUploadExternalFilesLeft = useCallback(
-    (dataTransfer: DataTransfer) => handleUploadExternalFilesForSide("left", dataTransfer),
+    (dataTransfer: DataTransfer, targetPath?: string) => handleUploadExternalFilesForSide("left", dataTransfer, targetPath),
     [handleUploadExternalFilesForSide],
   );
 
   const onUploadExternalFilesRight = useCallback(
-    (dataTransfer: DataTransfer) => handleUploadExternalFilesForSide("right", dataTransfer),
+    (dataTransfer: DataTransfer, targetPath?: string) => handleUploadExternalFilesForSide("right", dataTransfer, targetPath),
     [handleUploadExternalFilesForSide],
   );
 
   const handleDownloadFileForSide = useCallback(
-    async (side: "left" | "right", file: SftpFileEntry) => {
+    async (side: "left" | "right", file: SftpFileEntry, fullPath?: string) => {
       const pane = side === "left" ? sftpRef.current.leftPane : sftpRef.current.rightPane;
       if (!pane.connection) return;
 
-      const fullPath = sftpRef.current.joinPath(pane.connection.currentPath, file.name);
+      const resolvedFullPath = fullPath ?? sftpRef.current.joinPath(pane.connection.currentPath, file.name);
       const isDirectory = isNavigableDirectory(file);
 
       try {
@@ -384,7 +403,7 @@ export const useSftpViewFileOps = ({
             return;
           }
 
-          const content = await sftpRef.current.readBinaryFile(side, fullPath);
+          const content = await sftpRef.current.readBinaryFile(side, resolvedFullPath);
 
           const blob = new Blob([content], { type: "application/octet-stream" });
           const url = URL.createObjectURL(blob);
@@ -412,7 +431,7 @@ export const useSftpViewFileOps = ({
         }
 
         if (isDirectory) {
-          if (!listSftp || !mkdirLocal || !selectDirectory) {
+          if (!selectDirectory) {
             toast.error(t("sftp.error.downloadFailed"), "SFTP");
             return;
           }
@@ -422,402 +441,30 @@ export const useSftpViewFileOps = ({
 
           const targetPath = joinFsPath(selectedDirectory, file.name);
 
-          const transferId = `download-dir-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-          let completedBytes = 0;
-          const MAX_SYMLINK_DEPTH = 32;
-          const DIRECTORY_DOWNLOAD_MAX_CONCURRENCY = 10;
-          const activeChildTransferIds = new Set<string>();
-          const activeFileProgress = new Map<string, { transferred: number; speed: number }>();
-          const activeFileSizes = new Map<string, number>();
-          const visitedPaths = new Set<string>();
-          const directoryTaskQueue: Array<{
-            type: "directory";
-            remotePath: string;
-            localPath: string;
-            symlinkDepth: number;
-          }> = [];
-          const fileTaskQueue: Array<{
-            type: "file";
-            remotePath: string;
-            localPath: string;
-            size: number;
-          }> = [];
-          let pendingDirectoryTasks = 0;
-          let discoveredTotalBytes = 0;
-          let estimatedTotalBytes = 0;
-          let activeQueueTasks = 0;
-
-          const isTaskCancelled = () =>
-            sftpRef.current.transfers.some(
-              (task) => task.id === transferId && task.status === "cancelled",
-            );
-
-          const updateAggregateProgress = () => {
-            let activeTransferredBytes = 0;
-            let activeSpeed = 0;
-
-            for (const progress of activeFileProgress.values()) {
-              activeTransferredBytes += progress.transferred;
-              activeSpeed += progress.speed;
-            }
-
-            sftpRef.current.updateExternalUpload(transferId, {
-              fileName: pendingDirectoryTasks > 0 ? `${file.name} (${t("sftp.upload.scanning")})` : file.name,
-              transferredBytes: completedBytes + activeTransferredBytes,
-              totalBytes: estimatedTotalBytes > 0 ? estimatedTotalBytes : 0,
-              speed: activeSpeed,
-            });
-          };
-
-          const cancelActiveChildTransfers = async () => {
-            await Promise.all(
-              Array.from(activeChildTransferIds).map((childTransferId) =>
-                sftpRef.current.cancelTransfer(childTransferId).catch(() => undefined),
-              ),
-            );
-          };
-
-          const maybeFinalizeDiscovery = () => {
-            if (pendingDirectoryTasks === 0) {
-              estimatedTotalBytes = discoveredTotalBytes;
-              updateAggregateProgress();
-            }
-          };
-
-          const getDynamicConcurrencyLimit = () => {
-            let largeFiles = 0;
-            let mediumFiles = 0;
-
-            for (const size of activeFileSizes.values()) {
-              if (size >= 32 * 1024 * 1024) largeFiles += 1;
-              else if (size >= 1 * 1024 * 1024) mediumFiles += 1;
-            }
-
-            if (largeFiles > 0) return 2;
-            if (mediumFiles >= 2) return 4;
-            if (mediumFiles === 1) return 5;
-            return DIRECTORY_DOWNLOAD_MAX_CONCURRENCY;
-          };
-
-          const enqueueDirectoryTask = (task: {
-            type: "directory";
-            remotePath: string;
-            localPath: string;
-            symlinkDepth: number;
-          }) => {
-            directoryTaskQueue.push(task);
-          };
-
-          const enqueueFileTask = (task: {
-            type: "file";
-            remotePath: string;
-            localPath: string;
-            size: number;
-          }) => {
-            const insertIndex = fileTaskQueue.findIndex((queuedTask) => queuedTask.size > task.size);
-            if (insertIndex === -1) {
-              fileTaskQueue.push(task);
-            } else {
-              fileTaskQueue.splice(insertIndex, 0, task);
-            }
-          };
-
-          const dequeueTask = () => {
-            if (pendingDirectoryTasks > 0 && directoryTaskQueue.length > 0) {
-              return directoryTaskQueue.shift() ?? null;
-            }
-            if (fileTaskQueue.length > 0) return fileTaskQueue.shift() ?? null;
-            if (directoryTaskQueue.length > 0) return directoryTaskQueue.shift() ?? null;
-            return null;
-          };
-
-          const processFileTask = async (task: {
-            type: "file";
-            remotePath: string;
-            localPath: string;
-            size: number;
-          }) => {
-            const childTransferId = `download-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-            activeChildTransferIds.add(childTransferId);
-            activeFileSizes.set(childTransferId, task.size);
-            activeFileProgress.set(childTransferId, { transferred: 0, speed: 0 });
-            updateAggregateProgress();
-
-            try {
-              await new Promise<void>((resolve, reject) => {
-                startStreamTransfer(
-                  {
-                    transferId: childTransferId,
-                    sourcePath: task.remotePath,
-                    targetPath: task.localPath,
-                    sourceType: "sftp",
-                    targetType: "local",
-                    sourceSftpId: sftpId,
-                    totalBytes: task.size,
-                    sourceEncoding: pane.filenameEncoding,
-                  },
-                  (transferred, _total, speed) => {
-                    if (isTaskCancelled()) {
-                      sftpRef.current.cancelTransfer(childTransferId).catch(() => undefined);
-                      return;
-                    }
-
-                    activeFileProgress.set(childTransferId, {
-                      transferred,
-                      speed: Number.isFinite(speed) && speed > 0 ? speed : 0,
-                    });
-                    updateAggregateProgress();
-                  },
-                  () => {
-                    completedBytes += task.size;
-                    activeChildTransferIds.delete(childTransferId);
-                    activeFileSizes.delete(childTransferId);
-                    activeFileProgress.delete(childTransferId);
-                    updateAggregateProgress();
-                    resolve();
-                  },
-                  (error) => {
-                    activeChildTransferIds.delete(childTransferId);
-                    activeFileSizes.delete(childTransferId);
-                    activeFileProgress.delete(childTransferId);
-                    updateAggregateProgress();
-                    reject(new Error(error));
-                  },
-                )
-                  .then((result) => {
-                    if (result === undefined) {
-                      activeChildTransferIds.delete(childTransferId);
-                      activeFileSizes.delete(childTransferId);
-                      activeFileProgress.delete(childTransferId);
-                      updateAggregateProgress();
-                      reject(new Error("Stream transfer unavailable"));
-                    } else if (result.error) {
-                      activeChildTransferIds.delete(childTransferId);
-                      activeFileSizes.delete(childTransferId);
-                      activeFileProgress.delete(childTransferId);
-                      updateAggregateProgress();
-                      reject(new Error(result.error));
-                    }
-                  })
-                  .catch(reject);
-              });
-            } finally {
-              activeChildTransferIds.delete(childTransferId);
-              activeFileSizes.delete(childTransferId);
-              activeFileProgress.delete(childTransferId);
-            }
-          };
-
-          const processDirectoryTask = async (task: {
-            type: "directory";
-            remotePath: string;
-            localPath: string;
-            symlinkDepth: number;
-          }) => {
-            if (visitedPaths.has(task.remotePath)) {
-              pendingDirectoryTasks -= 1;
-              maybeFinalizeDiscovery();
-              return;
-            }
-
-            visitedPaths.add(task.remotePath);
-
-            if (isTaskCancelled()) {
-              throw new Error("Transfer cancelled");
-            }
-
-            const entries = await listSftp(sftpId, task.remotePath, pane.filenameEncoding);
-
-            for (const entry of entries) {
-              if (entry.name === ".." || entry.name === ".") continue;
-
-              if (isTaskCancelled()) {
-                await cancelActiveChildTransfers();
-                throw new Error("Transfer cancelled");
-              }
-
-              const remoteEntryPath = sftpRef.current.joinPath(task.remotePath, entry.name);
-              const localEntryPath = joinFsPath(task.localPath, entry.name);
-              const isRealDir = entry.type === "directory";
-              const isSymlinkDir =
-                entry.type === "symlink" && entry.linkTarget === "directory";
-
-              if (isRealDir || isSymlinkDir) {
-                if (isSymlinkDir && task.symlinkDepth >= MAX_SYMLINK_DEPTH) {
-                  throw new Error(
-                    "Maximum symlink directory depth exceeded (possible symlink cycle)",
-                  );
-                }
-
-                try {
-                  await mkdirLocal(localEntryPath);
-                } catch (mkdirErr: unknown) {
-                  const isEEXIST =
-                    mkdirErr instanceof Error && mkdirErr.message.includes("EEXIST");
-                  if (!isEEXIST) throw mkdirErr;
-                }
-
-                pendingDirectoryTasks += 1;
-                enqueueDirectoryTask({
-                  type: "directory",
-                  remotePath: remoteEntryPath,
-                  localPath: localEntryPath,
-                  symlinkDepth: isSymlinkDir ? task.symlinkDepth + 1 : task.symlinkDepth,
-                });
-                continue;
-              }
-
-              const entrySize =
-                typeof entry.size === "string"
-                  ? parseInt(String(entry.size), 10) || 0
-                  : entry.size || 0;
-              discoveredTotalBytes += entrySize;
-              enqueueFileTask({
-                type: "file",
-                remotePath: remoteEntryPath,
-                localPath: localEntryPath,
-                size: entrySize,
-              });
-            }
-
-            pendingDirectoryTasks -= 1;
-            maybeFinalizeDiscovery();
-          };
-
-          const runQueue = async () =>
-            new Promise<void>((resolve, reject) => {
-              let settled = false;
-
-              const pump = () => {
-                if (settled) return;
-
-                if (isTaskCancelled()) {
-                  settled = true;
-                  void cancelActiveChildTransfers().finally(() =>
-                    reject(new Error("Transfer cancelled")),
-                  );
-                  return;
-                }
-
-                while (
-                  activeQueueTasks < getDynamicConcurrencyLimit()
-                ) {
-                  const nextTask = dequeueTask();
-                  if (!nextTask) break;
-
-                  activeQueueTasks += 1;
-                  Promise.resolve(
-                    nextTask.type === "directory"
-                      ? processDirectoryTask(nextTask)
-                      : processFileTask(nextTask),
-                  )
-                    .then(() => {
-                      activeQueueTasks -= 1;
-                      if (
-                        !settled &&
-                        fileTaskQueue.length === 0 &&
-                        directoryTaskQueue.length === 0 &&
-                        activeQueueTasks === 0 &&
-                        pendingDirectoryTasks === 0
-                      ) {
-                        settled = true;
-                        resolve();
-                        return;
-                      }
-                      pump();
-                    })
-                    .catch((error) => {
-                      if (settled) return;
-                      settled = true;
-                      void cancelActiveChildTransfers().finally(() => reject(error));
-                    });
-                }
-
-                if (
-                  !settled &&
-                  fileTaskQueue.length === 0 &&
-                  directoryTaskQueue.length === 0 &&
-                  activeQueueTasks === 0 &&
-                  pendingDirectoryTasks === 0
-                ) {
-                  settled = true;
-                  resolve();
-                }
-              };
-
-              pump();
-            });
-
-          sftpRef.current.addExternalUpload({
-            id: transferId,
-            fileName: `${file.name} (${t("sftp.upload.scanning")})`,
-            sourcePath: fullPath,
-            targetPath,
-            sourceConnectionId: pane.connection.id,
-            targetConnectionId: "local",
-            direction: "download",
-            status: "transferring",
-            totalBytes: 0,
-            transferredBytes: 0,
-            speed: 0,
-            startTime: Date.now(),
-            isDirectory: true,
-            retryable: false,
-          });
-
           try {
-            try {
-              await mkdirLocal(targetPath);
-            } catch (mkdirErr: unknown) {
-              const isEEXIST =
-                mkdirErr instanceof Error && mkdirErr.message.includes("EEXIST");
-              if (isEEXIST && deleteLocalFile) {
-                await deleteLocalFile(targetPath);
-                await mkdirLocal(targetPath);
-              } else {
-                throw mkdirErr;
-              }
-            }
-
-            pendingDirectoryTasks = 1;
-            enqueueDirectoryTask({
-              type: "directory",
-              remotePath: fullPath,
-              localPath: targetPath,
-              symlinkDepth: 0,
-            });
-            await runQueue();
-
-            sftpRef.current.updateExternalUpload(transferId, {
-              status: "completed",
+            const status = await sftpRef.current.downloadToLocal({
               fileName: file.name,
-              transferredBytes: completedBytes,
-              totalBytes: estimatedTotalBytes > 0 ? estimatedTotalBytes : completedBytes,
-              speed: 0,
-              endTime: Date.now(),
+              sourcePath: resolvedFullPath,
+              targetPath,
+              sftpId,
+              connectionId: pane.connection.id,
+              sourceEncoding: pane.filenameEncoding,
+              isDirectory: true,
             });
-            toast.success(`${t("sftp.context.download")}: ${file.name}`, "SFTP");
+            if (status === "completed") {
+              toast.success(`${t("sftp.context.download")}: ${file.name}`, "SFTP");
+            } else if (status === "failed") {
+              toast.error(`${t("sftp.error.downloadFailed")}: ${file.name}`, "SFTP");
+            }
           } catch (error) {
-            const errorMessage =
-              error instanceof Error ? error.message : t("sftp.error.downloadFailed");
-            const isCancelled =
-              errorMessage.includes("cancelled") || errorMessage.includes("canceled");
-
-            sftpRef.current.updateExternalUpload(transferId, {
-              status: isCancelled ? "cancelled" : "failed",
-              error: isCancelled ? undefined : errorMessage,
-              speed: 0,
-              endTime: Date.now(),
-            });
-
-            if (!isCancelled) {
+            const errorMessage = error instanceof Error ? error.message : t("sftp.error.downloadFailed");
+            if (!errorMessage.includes("cancelled") && !errorMessage.includes("canceled")) {
               toast.error(errorMessage, "SFTP");
             }
           }
 
           return;
         }
-
         // Show save dialog to get target path
         const targetPath = await showSaveDialog(file.name);
         if (!targetPath) {
@@ -832,7 +479,7 @@ export const useSftpViewFileOps = ({
         sftpRef.current.addExternalUpload({
           id: transferId,
           fileName: file.name,
-          sourcePath: fullPath,
+          sourcePath: resolvedFullPath,
           targetPath,
           sourceConnectionId: pane.connection.id,
           targetConnectionId: 'local',
@@ -851,7 +498,7 @@ export const useSftpViewFileOps = ({
         const result = await startStreamTransfer(
           {
             transferId,
-            sourcePath: fullPath,
+            sourcePath: resolvedFullPath,
             targetPath,
             sourceType: 'sftp',
             targetType: 'local',
@@ -925,9 +572,6 @@ export const useSftpViewFileOps = ({
     [
       sftpRef,
       t,
-      listSftp,
-      mkdirLocal,
-      deleteLocalFile,
       showSaveDialog,
       selectDirectory,
       startStreamTransfer,
@@ -936,17 +580,18 @@ export const useSftpViewFileOps = ({
   );
 
   const onDownloadFileLeft = useCallback(
-    (file: SftpFileEntry) => handleDownloadFileForSide("left", file),
+    (file: SftpFileEntry, fullPath?: string) => handleDownloadFileForSide("left", file, fullPath),
     [handleDownloadFileForSide],
   );
 
   const onDownloadFileRight = useCallback(
-    (file: SftpFileEntry) => handleDownloadFileForSide("right", file),
+    (file: SftpFileEntry, fullPath?: string) => handleDownloadFileForSide("right", file, fullPath),
     [handleDownloadFileForSide],
   );
 
   const onOpenEntryLeft = useCallback(
-    (entry: SftpFileEntry) => {
+    (entry: SftpFileEntry, fullPath?: string) => {
+      const pane = sftpRef.current.leftPane;
       const isDir = isNavigableDirectory(entry);
 
       if (entry.name === ".." || isDir) {
@@ -955,20 +600,28 @@ export const useSftpViewFileOps = ({
       }
 
       if (behaviorRef.current === "transfer") {
+        const sourcePath = fullPath ? getParentPath(fullPath) : pane.connection?.currentPath;
+        const sourceConnectionId = pane.connection?.id;
         const fileData = [{
           name: entry.name,
           isDirectory: isDir,
+          sourceConnectionId,
+          sourcePath,
         }];
-        sftpRef.current.startTransfer(fileData, "left", "right");
+        sftpRef.current.startTransfer(fileData, "left", "right", {
+          sourceConnectionId,
+          sourcePath,
+        });
       } else {
-        onOpenFileLeft(entry);
+        onOpenFileLeft(entry, fullPath);
       }
     },
     [sftpRef, onOpenFileLeft, behaviorRef],
   );
 
   const onOpenEntryRight = useCallback(
-    (entry: SftpFileEntry) => {
+    (entry: SftpFileEntry, fullPath?: string) => {
+      const pane = sftpRef.current.rightPane;
       const isDir = isNavigableDirectory(entry);
 
       if (entry.name === ".." || isDir) {
@@ -977,13 +630,20 @@ export const useSftpViewFileOps = ({
       }
 
       if (behaviorRef.current === "transfer") {
+        const sourcePath = fullPath ? getParentPath(fullPath) : pane.connection?.currentPath;
+        const sourceConnectionId = pane.connection?.id;
         const fileData = [{
           name: entry.name,
           isDirectory: isDir,
+          sourceConnectionId,
+          sourcePath,
         }];
-        sftpRef.current.startTransfer(fileData, "right", "left");
+        sftpRef.current.startTransfer(fileData, "right", "left", {
+          sourceConnectionId,
+          sourcePath,
+        });
       } else {
-        onOpenFileRight(entry);
+        onOpenFileRight(entry, fullPath);
       }
     },
     [sftpRef, onOpenFileRight, behaviorRef],

components/sftp/hooks/useSftpViewPaneActions.ts

@@ -1,7 +1,8 @@
 import { useCallback, useMemo, useState } from "react";
 import type { MutableRefObject } from "react";
 import type { SftpStateApi } from "../../../application/state/useSftpState";
-import type { SftpDragCallbacks } from "../SftpContext";
+import type { SftpDragCallbacks, SftpTransferSource } from "../SftpContext";
+import { keepOnlyActivePaneSelections } from "./selectionScope";
 
 interface UseSftpViewPaneActionsParams {
   sftpRef: MutableRefObject<SftpStateApi>;
@@ -9,17 +10,21 @@ interface UseSftpViewPaneActionsParams {
 
 interface UseSftpViewPaneActionsResult {
   dragCallbacks: SftpDragCallbacks;
-  draggedFiles: { name: string; isDirectory: boolean; side: "left" | "right" }[] | null;
+  draggedFiles: (SftpTransferSource & { side: "left" | "right" })[] | null;
   onConnectLeft: (host: Parameters<SftpStateApi["connect"]>[1]) => void;
   onConnectRight: (host: Parameters<SftpStateApi["connect"]>[1]) => void;
   onDisconnectLeft: () => void;
   onDisconnectRight: () => void;
+  onPrepareSelectionLeft: () => void;
+  onPrepareSelectionRight: () => void;
   onNavigateToLeft: (path: string) => void;
   onNavigateToRight: (path: string) => void;
   onNavigateUpLeft: () => void;
   onNavigateUpRight: () => void;
   onRefreshLeft: () => void;
   onRefreshRight: () => void;
+  onRefreshTabLeft: (tabId: string) => void;
+  onRefreshTabRight: (tabId: string) => void;
   onSetFilenameEncodingLeft: (encoding: Parameters<SftpStateApi["setFilenameEncoding"]>[1]) => void;
   onSetFilenameEncodingRight: (encoding: Parameters<SftpStateApi["setFilenameEncoding"]>[1]) => void;
   onToggleSelectionLeft: (name: string, multi: boolean) => void;
@@ -32,28 +37,38 @@ interface UseSftpViewPaneActionsResult {
   onSetFilterRight: (filter: string) => void;
   onCreateDirectoryLeft: (name: string) => void;
   onCreateDirectoryRight: (name: string) => void;
+  onCreateDirectoryAtPathLeft: (path: string, name: string) => void;
+  onCreateDirectoryAtPathRight: (path: string, name: string) => void;
   onCreateFileLeft: (name: string) => void;
   onCreateFileRight: (name: string) => void;
+  onCreateFileAtPathLeft: (path: string, name: string) => void;
+  onCreateFileAtPathRight: (path: string, name: string) => void;
   onDeleteFilesLeft: (names: string[]) => void;
   onDeleteFilesRight: (names: string[]) => void;
+  onDeleteFilesAtPathLeft: (connectionId: string, path: string, names: string[]) => void;
+  onDeleteFilesAtPathRight: (connectionId: string, path: string, names: string[]) => void;
   onRenameFileLeft: (old: string, newName: string) => void;
   onRenameFileRight: (old: string, newName: string) => void;
-  onCopyToOtherPaneLeft: (files: { name: string; isDirectory: boolean }[]) => void;
-  onCopyToOtherPaneRight: (files: { name: string; isDirectory: boolean }[]) => void;
-  onReceiveFromOtherPaneLeft: (files: { name: string; isDirectory: boolean }[]) => void;
-  onReceiveFromOtherPaneRight: (files: { name: string; isDirectory: boolean }[]) => void;
+  onRenameFileAtPathLeft: (oldPath: string, newName: string) => void;
+  onRenameFileAtPathRight: (oldPath: string, newName: string) => void;
+  onMoveEntriesToPathLeft: (sourcePaths: string[], targetPath: string) => void;
+  onMoveEntriesToPathRight: (sourcePaths: string[], targetPath: string) => void;
+  onCopyToOtherPaneLeft: (files: SftpTransferSource[]) => void;
+  onCopyToOtherPaneRight: (files: SftpTransferSource[]) => void;
+  onReceiveFromOtherPaneLeft: (files: SftpTransferSource[]) => void;
+  onReceiveFromOtherPaneRight: (files: SftpTransferSource[]) => void;
 }
 
 export const useSftpViewPaneActions = ({
   sftpRef,
 }: UseSftpViewPaneActionsParams): UseSftpViewPaneActionsResult => {
   const [draggedFiles, setDraggedFiles] = useState<
-    { name: string; isDirectory: boolean; side: "left" | "right" }[] | null
+    (SftpTransferSource & { side: "left" | "right" })[] | null
   >(null);
 
   const handleDragStart = useCallback(
     (
-      files: { name: string; isDirectory: boolean }[],
+      files: SftpTransferSource[],
       side: "left" | "right",
     ) => {
       setDraggedFiles(files.map((f) => ({ ...f, side })));
@@ -65,25 +80,43 @@ export const useSftpViewPaneActions = ({
     setDraggedFiles(null);
   }, []);
 
-  const onCopyToOtherPaneLeft = useCallback(
-    (files: { name: string; isDirectory: boolean }[]) =>
-      sftpRef.current.startTransfer(files, "left", "right"),
+  const startGroupedTransfer = useCallback(
+    (files: SftpTransferSource[], sourceSide: "left" | "right", targetSide: "left" | "right") => {
+      const groups = new Map<string, SftpTransferSource[]>();
+      for (const file of files) {
+        const key = `${file.sourceConnectionId ?? ""}::${file.sourcePath ?? ""}`;
+        const group = groups.get(key) ?? [];
+        group.push(file);
+        groups.set(key, group);
+      }
+
+      for (const group of groups.values()) {
+        const [{ sourceConnectionId, sourcePath, targetPath }] = group;
+        void sftpRef.current.startTransfer(group, sourceSide, targetSide, {
+          sourceConnectionId,
+          sourcePath,
+          targetPath,
+        });
+      }
+    },
     [sftpRef],
   );
+
+  const onCopyToOtherPaneLeft = useCallback(
+    (files: SftpTransferSource[]) => startGroupedTransfer(files, "left", "right"),
+    [startGroupedTransfer],
+  );
   const onCopyToOtherPaneRight = useCallback(
-    (files: { name: string; isDirectory: boolean }[]) =>
-      sftpRef.current.startTransfer(files, "right", "left"),
-    [sftpRef],
+    (files: SftpTransferSource[]) => startGroupedTransfer(files, "right", "left"),
+    [startGroupedTransfer],
   );
   const onReceiveFromOtherPaneLeft = useCallback(
-    (files: { name: string; isDirectory: boolean }[]) =>
-      sftpRef.current.startTransfer(files, "right", "left"),
-    [sftpRef],
+    (files: SftpTransferSource[]) => startGroupedTransfer(files, "right", "left"),
+    [startGroupedTransfer],
   );
   const onReceiveFromOtherPaneRight = useCallback(
-    (files: { name: string; isDirectory: boolean }[]) =>
-      sftpRef.current.startTransfer(files, "left", "right"),
-    [sftpRef],
+    (files: SftpTransferSource[]) => startGroupedTransfer(files, "left", "right"),
+    [startGroupedTransfer],
   );
 
   const onConnectLeft = useCallback(
@@ -96,6 +129,12 @@ export const useSftpViewPaneActions = ({
   );
   const onDisconnectLeft = useCallback(() => sftpRef.current.disconnect("left"), [sftpRef]);
   const onDisconnectRight = useCallback(() => sftpRef.current.disconnect("right"), [sftpRef]);
+  const onPrepareSelectionLeft = useCallback(() => {
+    keepOnlyActivePaneSelections(sftpRef.current, "left");
+  }, [sftpRef]);
+  const onPrepareSelectionRight = useCallback(() => {
+    keepOnlyActivePaneSelections(sftpRef.current, "right");
+  }, [sftpRef]);
   const onNavigateToLeft = useCallback(
     (path: string) => sftpRef.current.navigateTo("left", path),
     [sftpRef],
@@ -108,6 +147,8 @@ export const useSftpViewPaneActions = ({
   const onNavigateUpRight = useCallback(() => sftpRef.current.navigateUp("right"), [sftpRef]);
   const onRefreshLeft = useCallback(() => sftpRef.current.refresh("left"), [sftpRef]);
   const onRefreshRight = useCallback(() => sftpRef.current.refresh("right"), [sftpRef]);
+  const onRefreshTabLeft = useCallback((tabId: string) => sftpRef.current.refresh("left", { tabId }), [sftpRef]);
+  const onRefreshTabRight = useCallback((tabId: string) => sftpRef.current.refresh("right", { tabId }), [sftpRef]);
   const onSetFilenameEncodingLeft = useCallback(
     (encoding: Parameters<SftpStateApi["setFilenameEncoding"]>[1]) =>
       sftpRef.current.setFilenameEncoding("left", encoding),
@@ -119,20 +160,32 @@ export const useSftpViewPaneActions = ({
     [sftpRef],
   );
   const onToggleSelectionLeft = useCallback(
-    (name: string, multi: boolean) => sftpRef.current.toggleSelection("left", name, multi),
-    [sftpRef],
+    (name: string, multi: boolean) => {
+      onPrepareSelectionLeft();
+      sftpRef.current.toggleSelection("left", name, multi);
+    },
+    [onPrepareSelectionLeft, sftpRef],
   );
   const onToggleSelectionRight = useCallback(
-    (name: string, multi: boolean) => sftpRef.current.toggleSelection("right", name, multi),
-    [sftpRef],
+    (name: string, multi: boolean) => {
+      onPrepareSelectionRight();
+      sftpRef.current.toggleSelection("right", name, multi);
+    },
+    [onPrepareSelectionRight, sftpRef],
   );
   const onRangeSelectLeft = useCallback(
-    (fileNames: string[]) => sftpRef.current.rangeSelect("left", fileNames),
-    [sftpRef],
+    (fileNames: string[]) => {
+      onPrepareSelectionLeft();
+      sftpRef.current.rangeSelect("left", fileNames);
+    },
+    [onPrepareSelectionLeft, sftpRef],
   );
   const onRangeSelectRight = useCallback(
-    (fileNames: string[]) => sftpRef.current.rangeSelect("right", fileNames),
-    [sftpRef],
+    (fileNames: string[]) => {
+      onPrepareSelectionRight();
+      sftpRef.current.rangeSelect("right", fileNames);
+    },
+    [onPrepareSelectionRight, sftpRef],
   );
   const onClearSelectionLeft = useCallback(() => sftpRef.current.clearSelection("left"), [sftpRef]);
   const onClearSelectionRight = useCallback(() => sftpRef.current.clearSelection("right"), [sftpRef]);
@@ -152,6 +205,14 @@ export const useSftpViewPaneActions = ({
     (name: string) => sftpRef.current.createDirectory("right", name),
     [sftpRef],
   );
+  const onCreateDirectoryAtPathLeft = useCallback(
+    (path: string, name: string) => sftpRef.current.createDirectoryAtPath("left", path, name),
+    [sftpRef],
+  );
+  const onCreateDirectoryAtPathRight = useCallback(
+    (path: string, name: string) => sftpRef.current.createDirectoryAtPath("right", path, name),
+    [sftpRef],
+  );
   const onCreateFileLeft = useCallback(
     (name: string) => sftpRef.current.createFile("left", name),
     [sftpRef],
@@ -160,6 +221,14 @@ export const useSftpViewPaneActions = ({
     (name: string) => sftpRef.current.createFile("right", name),
     [sftpRef],
   );
+  const onCreateFileAtPathLeft = useCallback(
+    (path: string, name: string) => sftpRef.current.createFileAtPath("left", path, name),
+    [sftpRef],
+  );
+  const onCreateFileAtPathRight = useCallback(
+    (path: string, name: string) => sftpRef.current.createFileAtPath("right", path, name),
+    [sftpRef],
+  );
   const onDeleteFilesLeft = useCallback(
     (names: string[]) => sftpRef.current.deleteFiles("left", names),
     [sftpRef],
@@ -168,6 +237,16 @@ export const useSftpViewPaneActions = ({
     (names: string[]) => sftpRef.current.deleteFiles("right", names),
     [sftpRef],
   );
+  const onDeleteFilesAtPathLeft = useCallback(
+    (connectionId: string, path: string, names: string[]) =>
+      sftpRef.current.deleteFilesAtPath("left", connectionId, path, names),
+    [sftpRef],
+  );
+  const onDeleteFilesAtPathRight = useCallback(
+    (connectionId: string, path: string, names: string[]) =>
+      sftpRef.current.deleteFilesAtPath("right", connectionId, path, names),
+    [sftpRef],
+  );
   const onRenameFileLeft = useCallback(
     (old: string, newName: string) => sftpRef.current.renameFile("left", old, newName),
     [sftpRef],
@@ -176,6 +255,22 @@ export const useSftpViewPaneActions = ({
     (old: string, newName: string) => sftpRef.current.renameFile("right", old, newName),
     [sftpRef],
   );
+  const onRenameFileAtPathLeft = useCallback(
+    (oldPath: string, newName: string) => sftpRef.current.renameFileAtPath("left", oldPath, newName),
+    [sftpRef],
+  );
+  const onRenameFileAtPathRight = useCallback(
+    (oldPath: string, newName: string) => sftpRef.current.renameFileAtPath("right", oldPath, newName),
+    [sftpRef],
+  );
+  const onMoveEntriesToPathLeft = useCallback(
+    (sourcePaths: string[], targetPath: string) => sftpRef.current.moveEntriesToPath("left", sourcePaths, targetPath),
+    [sftpRef],
+  );
+  const onMoveEntriesToPathRight = useCallback(
+    (sourcePaths: string[], targetPath: string) => sftpRef.current.moveEntriesToPath("right", sourcePaths, targetPath),
+    [sftpRef],
+  );
 
   const dragCallbacks = useMemo<SftpDragCallbacks>(
     () => ({
@@ -192,12 +287,16 @@ export const useSftpViewPaneActions = ({
     onConnectRight,
     onDisconnectLeft,
     onDisconnectRight,
+    onPrepareSelectionLeft,
+    onPrepareSelectionRight,
     onNavigateToLeft,
     onNavigateToRight,
     onNavigateUpLeft,
     onNavigateUpRight,
     onRefreshLeft,
     onRefreshRight,
+    onRefreshTabLeft,
+    onRefreshTabRight,
     onSetFilenameEncodingLeft,
     onSetFilenameEncodingRight,
     onToggleSelectionLeft,
@@ -210,12 +309,22 @@ export const useSftpViewPaneActions = ({
     onSetFilterRight,
     onCreateDirectoryLeft,
     onCreateDirectoryRight,
+    onCreateDirectoryAtPathLeft,
+    onCreateDirectoryAtPathRight,
     onCreateFileLeft,
     onCreateFileRight,
+    onCreateFileAtPathLeft,
+    onCreateFileAtPathRight,
     onDeleteFilesLeft,
     onDeleteFilesRight,
+    onDeleteFilesAtPathLeft,
+    onDeleteFilesAtPathRight,
     onRenameFileLeft,
     onRenameFileRight,
+    onRenameFileAtPathLeft,
+    onRenameFileAtPathRight,
+    onMoveEntriesToPathLeft,
+    onMoveEntriesToPathRight,
     onCopyToOtherPaneLeft,
     onCopyToOtherPaneRight,
     onReceiveFromOtherPaneLeft,

components/sftp/hooks/useSftpViewPaneCallbacks.ts

@@ -1,11 +1,15 @@
-import { useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import type { MutableRefObject } from "react";
 import type { SftpStateApi } from "../../../application/state/useSftpState";
 import type { RemoteFile, SftpFilenameEncoding } from "../../../types";
 import type { SftpPaneCallbacks } from "../SftpContext";
+import type { SftpPane } from "../../../application/state/sftp/types";
 import { useSftpViewPaneActions } from "./useSftpViewPaneActions";
 import { useSftpViewFileOps } from "./useSftpViewFileOps";
 import type { FileOpenerType, SystemAppInfo } from "../../../lib/sftpFileUtils";
+import { formatFileSize, formatDate } from '../../../application/state/sftp/utils';
+import { isSessionError } from "../../../application/state/sftp/errors";
+import { filterHiddenFiles } from "../utils";
 
 interface UseSftpViewPaneCallbacksParams {
   sftpRef: MutableRefObject<SftpStateApi>;
@@ -21,8 +25,6 @@ interface UseSftpViewPaneCallbacksParams {
   ) => void;
   t: (key: string, vars?: Record<string, string | number>) => string;
   listSftp?: (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => Promise<RemoteFile[]>;
-  mkdirLocal?: (path: string) => Promise<unknown>;
-  deleteLocalFile?: (path: string) => Promise<unknown>;
   showSaveDialog?: (defaultPath: string, filters?: Array<{ name: string; extensions: string[] }>) => Promise<string | null>;
   selectDirectory?: (title?: string, defaultPath?: string) => Promise<string | null>;
   startStreamTransfer?: (
@@ -43,6 +45,7 @@ interface UseSftpViewPaneCallbacksParams {
     onError?: (error: string) => void
   ) => Promise<{ transferId: string; totalBytes?: number; error?: string }>;
   getSftpIdForConnection?: (connectionId: string) => string | undefined;
+  listLocalFiles: (path: string) => Promise<RemoteFile[]>;
 }
 
 export const useSftpViewPaneCallbacks = ({
@@ -53,12 +56,11 @@ export const useSftpViewPaneCallbacks = ({
   setOpenerForExtension,
   t,
   listSftp,
-  mkdirLocal,
-  deleteLocalFile,
   showSaveDialog,
   selectDirectory,
   startStreamTransfer,
   getSftpIdForConnection,
+  listLocalFiles,
 }: UseSftpViewPaneCallbacksParams) => {
   const paneActions = useSftpViewPaneActions({ sftpRef });
   const fileOps = useSftpViewFileOps({
@@ -68,23 +70,81 @@ export const useSftpViewPaneCallbacks = ({
     getOpenerForFileRef,
     setOpenerForExtension,
     t,
-    listSftp,
-    mkdirLocal,
-    deleteLocalFile,
     showSaveDialog,
     selectDirectory,
     startStreamTransfer,
     getSftpIdForConnection,
   });
 
+  const listLocalFilesRef = useRef(listLocalFiles);
+  const listSftpRef = useRef(listSftp);
+  const getSftpIdForConnectionRef = useRef(getSftpIdForConnection);
+
+  useEffect(() => {
+    listLocalFilesRef.current = listLocalFiles;
+    listSftpRef.current = listSftp;
+    getSftpIdForConnectionRef.current = getSftpIdForConnection;
+  }, [listLocalFiles, listSftp, getSftpIdForConnection]);
+
+  const makeListDirectory = (side: "left" | "right", getPane: () => SftpPane) =>
+    async (path: string) => {
+      const pane = getPane();
+      if (!pane.connection) return [];
+      const toSize = (raw: string) => parseInt(raw) || 0;
+      const toTs = (raw: string) => new Date(raw).getTime();
+      const normalizeEntries = (rawFiles: RemoteFile[]) =>
+        filterHiddenFiles(
+          rawFiles.map(f => {
+            const s = toSize(f.size);
+            const ms = toTs(f.lastModified);
+            return {
+              name: f.name,
+              type: f.type as 'file' | 'directory' | 'symlink',
+              size: s,
+              sizeFormatted: formatFileSize(s),
+              lastModified: ms,
+              lastModifiedFormatted: formatDate(ms),
+              permissions: f.permissions,
+              linkTarget: f.linkTarget as 'file' | 'directory' | null | undefined,
+              hidden: f.hidden,
+            };
+          }),
+          pane.showHiddenFiles,
+        );
+      if (pane.connection.isLocal) {
+        return normalizeEntries(await listLocalFilesRef.current(path));
+      }
+      const sftpId = getSftpIdForConnectionRef.current?.(pane.connection.id);
+      if (!sftpId) {
+        const error = new Error("SFTP session not found");
+        sftpRef.current.reportSessionError(side, error);
+        throw error;
+      }
+
+      let rawFiles: RemoteFile[] | undefined;
+      try {
+        rawFiles = await listSftpRef.current?.(sftpId, path, pane.filenameEncoding);
+      } catch (err) {
+        if (isSessionError(err)) {
+          sftpRef.current.reportSessionError(side, err as Error);
+        }
+        throw err;
+      }
+
+      if (!rawFiles) return [];
+      return normalizeEntries(rawFiles);
+    };
+
   /* eslint-disable react-hooks/exhaustive-deps -- Handlers use refs, so they are stable */
   const leftCallbacks = useMemo<SftpPaneCallbacks>(
     () => ({
       onConnect: paneActions.onConnectLeft,
       onDisconnect: paneActions.onDisconnectLeft,
+      onPrepareSelection: paneActions.onPrepareSelectionLeft,
       onNavigateTo: paneActions.onNavigateToLeft,
       onNavigateUp: paneActions.onNavigateUpLeft,
       onRefresh: paneActions.onRefreshLeft,
+      onRefreshTab: paneActions.onRefreshTabLeft,
       onSetFilenameEncoding: paneActions.onSetFilenameEncodingLeft,
       onOpenEntry: fileOps.onOpenEntryLeft,
       onToggleSelection: paneActions.onToggleSelectionLeft,
@@ -92,9 +152,14 @@ export const useSftpViewPaneCallbacks = ({
       onClearSelection: paneActions.onClearSelectionLeft,
       onSetFilter: paneActions.onSetFilterLeft,
       onCreateDirectory: paneActions.onCreateDirectoryLeft,
+      onCreateDirectoryAtPath: paneActions.onCreateDirectoryAtPathLeft,
       onCreateFile: paneActions.onCreateFileLeft,
+      onCreateFileAtPath: paneActions.onCreateFileAtPathLeft,
       onDeleteFiles: paneActions.onDeleteFilesLeft,
+      onDeleteFilesAtPath: paneActions.onDeleteFilesAtPathLeft,
       onRenameFile: paneActions.onRenameFileLeft,
+      onRenameFileAtPath: paneActions.onRenameFileAtPathLeft,
+      onMoveEntriesToPath: paneActions.onMoveEntriesToPathLeft,
       onCopyToOtherPane: paneActions.onCopyToOtherPaneLeft,
       onReceiveFromOtherPane: paneActions.onReceiveFromOtherPaneLeft,
       onEditPermissions: fileOps.onEditPermissionsLeft,
@@ -103,6 +168,7 @@ export const useSftpViewPaneCallbacks = ({
       onOpenFileWith: fileOps.onOpenFileWithLeft,
       onDownloadFile: fileOps.onDownloadFileLeft,
       onUploadExternalFiles: fileOps.onUploadExternalFilesLeft,
+      onListDirectory: makeListDirectory("left", () => sftpRef.current.leftPane),
     }),
     [],
   );
@@ -111,9 +177,11 @@ export const useSftpViewPaneCallbacks = ({
     () => ({
       onConnect: paneActions.onConnectRight,
       onDisconnect: paneActions.onDisconnectRight,
+      onPrepareSelection: paneActions.onPrepareSelectionRight,
       onNavigateTo: paneActions.onNavigateToRight,
       onNavigateUp: paneActions.onNavigateUpRight,
       onRefresh: paneActions.onRefreshRight,
+      onRefreshTab: paneActions.onRefreshTabRight,
       onSetFilenameEncoding: paneActions.onSetFilenameEncodingRight,
       onOpenEntry: fileOps.onOpenEntryRight,
       onToggleSelection: paneActions.onToggleSelectionRight,
@@ -121,9 +189,14 @@ export const useSftpViewPaneCallbacks = ({
       onClearSelection: paneActions.onClearSelectionRight,
       onSetFilter: paneActions.onSetFilterRight,
       onCreateDirectory: paneActions.onCreateDirectoryRight,
+      onCreateDirectoryAtPath: paneActions.onCreateDirectoryAtPathRight,
       onCreateFile: paneActions.onCreateFileRight,
+      onCreateFileAtPath: paneActions.onCreateFileAtPathRight,
       onDeleteFiles: paneActions.onDeleteFilesRight,
+      onDeleteFilesAtPath: paneActions.onDeleteFilesAtPathRight,
       onRenameFile: paneActions.onRenameFileRight,
+      onRenameFileAtPath: paneActions.onRenameFileAtPathRight,
+      onMoveEntriesToPath: paneActions.onMoveEntriesToPathRight,
       onCopyToOtherPane: paneActions.onCopyToOtherPaneRight,
       onReceiveFromOtherPane: paneActions.onReceiveFromOtherPaneRight,
       onEditPermissions: fileOps.onEditPermissionsRight,
@@ -132,6 +205,7 @@ export const useSftpViewPaneCallbacks = ({
       onOpenFileWith: fileOps.onOpenFileWithRight,
       onDownloadFile: fileOps.onDownloadFileRight,
       onUploadExternalFiles: fileOps.onUploadExternalFilesRight,
+      onListDirectory: makeListDirectory("right", () => sftpRef.current.rightPane),
     }),
     [],
   );

components/sftp/hooks/useSftpViewTabs.ts

@@ -21,8 +21,8 @@ interface UseSftpViewTabsResult {
   setShowHostPickerRight: React.Dispatch<React.SetStateAction<boolean>>;
   setHostSearchLeft: React.Dispatch<React.SetStateAction<string>>;
   setHostSearchRight: React.Dispatch<React.SetStateAction<string>>;
-  handleAddTabLeft: () => void;
-  handleAddTabRight: () => void;
+  handleAddTabLeft: () => string;
+  handleAddTabRight: () => string;
   handleCloseTabLeft: (tabId: string) => void;
   handleCloseTabRight: (tabId: string) => void;
   handleSelectTabLeft: (tabId: string) => void;
@@ -42,13 +42,15 @@ export const useSftpViewTabs = ({ sftp, sftpRef }: UseSftpViewTabsParams): UseSf
   const [hostSearchRight, setHostSearchRight] = useState("");
 
   const handleAddTabLeft = useCallback(() => {
-    sftpRef.current.addTab("left");
+    const tabId = sftpRef.current.addTab("left");
     setShowHostPickerLeft(true);
+    return tabId;
   }, [sftpRef]);
 
   const handleAddTabRight = useCallback(() => {
-    sftpRef.current.addTab("right");
+    const tabId = sftpRef.current.addTab("right");
     setShowHostPickerRight(true);
+    return tabId;
   }, [sftpRef]);
 
   const handleCloseTabLeft = useCallback((tabId: string) => {

components/sftp/index.ts

@@ -7,7 +7,7 @@
 // Utilities
 export {
   formatBytes, formatDate,
-  formatSpeed, formatTransferBytes, getFileIcon, isNavigableDirectory, isHiddenFile, isWindowsHiddenFile, filterHiddenFiles, type ColumnWidths, type SortField,
+  formatSpeed, formatTransferBytes, getFileIcon, isNavigableDirectory, isHiddenFile, isWindowsHiddenFile, filterHiddenFiles, sortSftpEntries, type ColumnWidths, type SortField,
   type SortOrder
 } from './utils';
 

components/sftp/utils.ts

@@ -22,8 +22,160 @@ import {
     Terminal,
 } from 'lucide-react';
 import React from 'react';
+import type { LucideIcon } from 'lucide-react';
 import { SftpFileEntry } from '../../types';
 
+// Pre-built icon maps for O(1) lookup in getFileIcon
+type IconDef = [LucideIcon, string?];
+
+const EXTENSION_ICON_MAP = new Map<string, IconDef>([
+    // Documents
+    ['doc', [FileText, "text-blue-500"]],
+    ['docx', [FileText, "text-blue-500"]],
+    ['rtf', [FileText, "text-blue-500"]],
+    ['odt', [FileText, "text-blue-500"]],
+    ['xls', [FileSpreadsheet, "text-green-500"]],
+    ['xlsx', [FileSpreadsheet, "text-green-500"]],
+    ['csv', [FileSpreadsheet, "text-green-500"]],
+    ['ods', [FileSpreadsheet, "text-green-500"]],
+    ['ppt', [FileType, "text-orange-500"]],
+    ['pptx', [FileType, "text-orange-500"]],
+    ['odp', [FileType, "text-orange-500"]],
+    ['pdf', [FileText, "text-red-500"]],
+    // Code/Scripts
+    ['js', [FileCode, "text-yellow-500"]],
+    ['jsx', [FileCode, "text-yellow-500"]],
+    ['ts', [FileCode, "text-yellow-500"]],
+    ['tsx', [FileCode, "text-yellow-500"]],
+    ['mjs', [FileCode, "text-yellow-500"]],
+    ['cjs', [FileCode, "text-yellow-500"]],
+    ['py', [FileCode, "text-blue-400"]],
+    ['pyc', [FileCode, "text-blue-400"]],
+    ['pyw', [FileCode, "text-blue-400"]],
+    ['sh', [Terminal, "text-green-400"]],
+    ['bash', [Terminal, "text-green-400"]],
+    ['zsh', [Terminal, "text-green-400"]],
+    ['fish', [Terminal, "text-green-400"]],
+    ['bat', [Terminal, "text-green-400"]],
+    ['cmd', [Terminal, "text-green-400"]],
+    ['ps1', [Terminal, "text-green-400"]],
+    ['c', [FileCode, "text-blue-600"]],
+    ['cpp', [FileCode, "text-blue-600"]],
+    ['h', [FileCode, "text-blue-600"]],
+    ['hpp', [FileCode, "text-blue-600"]],
+    ['cc', [FileCode, "text-blue-600"]],
+    ['cxx', [FileCode, "text-blue-600"]],
+    ['java', [FileCode, "text-orange-600"]],
+    ['class', [FileCode, "text-orange-600"]],
+    ['jar', [FileCode, "text-orange-600"]],
+    ['go', [FileCode, "text-cyan-500"]],
+    ['rs', [FileCode, "text-orange-400"]],
+    ['rb', [FileCode, "text-red-400"]],
+    ['php', [FileCode, "text-purple-500"]],
+    ['html', [Globe, "text-orange-500"]],
+    ['htm', [Globe, "text-orange-500"]],
+    ['xhtml', [Globe, "text-orange-500"]],
+    ['css', [FileCode, "text-blue-500"]],
+    ['scss', [FileCode, "text-blue-500"]],
+    ['sass', [FileCode, "text-blue-500"]],
+    ['less', [FileCode, "text-blue-500"]],
+    ['vue', [FileCode, "text-green-500"]],
+    ['svelte', [FileCode, "text-green-500"]],
+    // Config/Data
+    ['json', [FileCode, "text-yellow-600"]],
+    ['json5', [FileCode, "text-yellow-600"]],
+    ['xml', [FileCode, "text-orange-400"]],
+    ['xsl', [FileCode, "text-orange-400"]],
+    ['xslt', [FileCode, "text-orange-400"]],
+    ['yml', [Settings, "text-pink-400"]],
+    ['yaml', [Settings, "text-pink-400"]],
+    ['toml', [Settings, "text-gray-400"]],
+    ['ini', [Settings, "text-gray-400"]],
+    ['conf', [Settings, "text-gray-400"]],
+    ['cfg', [Settings, "text-gray-400"]],
+    ['config', [Settings, "text-gray-400"]],
+    ['env', [Lock, "text-yellow-500"]],
+    ['sql', [Database, "text-blue-400"]],
+    ['sqlite', [Database, "text-blue-400"]],
+    ['db', [Database, "text-blue-400"]],
+    // Images
+    ['jpg', [FileImage, "text-purple-400"]],
+    ['jpeg', [FileImage, "text-purple-400"]],
+    ['png', [FileImage, "text-purple-400"]],
+    ['gif', [FileImage, "text-purple-400"]],
+    ['bmp', [FileImage, "text-purple-400"]],
+    ['webp', [FileImage, "text-purple-400"]],
+    ['svg', [FileImage, "text-purple-400"]],
+    ['ico', [FileImage, "text-purple-400"]],
+    ['tiff', [FileImage, "text-purple-400"]],
+    ['tif', [FileImage, "text-purple-400"]],
+    ['heic', [FileImage, "text-purple-400"]],
+    ['heif', [FileImage, "text-purple-400"]],
+    ['avif', [FileImage, "text-purple-400"]],
+    // Videos
+    ['mp4', [FileVideo, "text-pink-500"]],
+    ['mkv', [FileVideo, "text-pink-500"]],
+    ['avi', [FileVideo, "text-pink-500"]],
+    ['mov', [FileVideo, "text-pink-500"]],
+    ['wmv', [FileVideo, "text-pink-500"]],
+    ['flv', [FileVideo, "text-pink-500"]],
+    ['webm', [FileVideo, "text-pink-500"]],
+    ['m4v', [FileVideo, "text-pink-500"]],
+    ['3gp', [FileVideo, "text-pink-500"]],
+    ['mpeg', [FileVideo, "text-pink-500"]],
+    ['mpg', [FileVideo, "text-pink-500"]],
+    // Audio
+    ['mp3', [FileAudio, "text-green-400"]],
+    ['wav', [FileAudio, "text-green-400"]],
+    ['flac', [FileAudio, "text-green-400"]],
+    ['aac', [FileAudio, "text-green-400"]],
+    ['ogg', [FileAudio, "text-green-400"]],
+    ['m4a', [FileAudio, "text-green-400"]],
+    ['wma', [FileAudio, "text-green-400"]],
+    ['opus', [FileAudio, "text-green-400"]],
+    ['aiff', [FileAudio, "text-green-400"]],
+    // Archives
+    ['zip', [FileArchive, "text-amber-500"]],
+    ['rar', [FileArchive, "text-amber-500"]],
+    ['7z', [FileArchive, "text-amber-500"]],
+    ['tar', [FileArchive, "text-amber-500"]],
+    ['gz', [FileArchive, "text-amber-500"]],
+    ['bz2', [FileArchive, "text-amber-500"]],
+    ['xz', [FileArchive, "text-amber-500"]],
+    ['tgz', [FileArchive, "text-amber-500"]],
+    ['tbz2', [FileArchive, "text-amber-500"]],
+    ['lz', [FileArchive, "text-amber-500"]],
+    ['lzma', [FileArchive, "text-amber-500"]],
+    ['cab', [FileArchive, "text-amber-500"]],
+    ['iso', [FileArchive, "text-amber-500"]],
+    ['dmg', [FileArchive, "text-amber-500"]],
+    // Executables
+    ['exe', [File, "text-red-400"]],
+    ['msi', [File, "text-red-400"]],
+    ['app', [File, "text-red-400"]],
+    ['deb', [File, "text-red-400"]],
+    ['rpm', [File, "text-red-400"]],
+    ['apk', [File, "text-red-400"]],
+    ['ipa', [File, "text-red-400"]],
+    ['dll', [File, "text-gray-500"]],
+    ['so', [File, "text-gray-500"]],
+    ['dylib', [File, "text-gray-500"]],
+    // Keys/Certs
+    ['pem', [Key, "text-yellow-400"]],
+    ['crt', [Key, "text-yellow-400"]],
+    ['cer', [Key, "text-yellow-400"]],
+    ['key', [Key, "text-yellow-400"]],
+    ['pub', [Key, "text-yellow-400"]],
+    ['ppk', [Key, "text-yellow-400"]],
+    // Text/Markdown
+    ['md', [FileText, "text-gray-400"]],
+    ['markdown', [FileText, "text-gray-400"]],
+    ['mdx', [FileText, "text-gray-400"]],
+    ['txt', [FileText, "text-muted-foreground"]],
+    ['log', [FileText, "text-muted-foreground"]],
+    ['text', [FileText, "text-muted-foreground"]],
+]);
+
 /**
  * Format bytes with appropriate unit (B, KB, MB, GB)
  */
@@ -70,7 +222,8 @@ export const formatSpeed = (bytesPerSecond: number): string => {
 };
 
 /**
- * Comprehensive file icon helper - returns JSX element based on file type
+ * Comprehensive file icon helper - returns JSX element based on file type.
+ * Uses pre-built Map for O(1) extension lookup.
  */
 export const getFileIcon = (entry: SftpFileEntry): React.ReactElement => {
     if (entry.type === 'directory') return React.createElement(Folder, { size: 14 });
@@ -80,89 +233,13 @@ export const getFileIcon = (entry: SftpFileEntry): React.ReactElement => {
         return React.createElement(ExternalLink, { size: 14, className: "text-cyan-500" });
     }
 
-    const ext = entry.name.split('.').pop()?.toLowerCase() || '';
+    const ext = entry.name.includes('.') ? entry.name.split('.').pop()?.toLowerCase() ?? '' : '';
 
-    // Documents
-    if (['doc', 'docx', 'rtf', 'odt'].includes(ext))
-        return React.createElement(FileText, { size: 14, className: "text-blue-500" });
-    if (['xls', 'xlsx', 'csv', 'ods'].includes(ext))
-        return React.createElement(FileSpreadsheet, { size: 14, className: "text-green-500" });
-    if (['ppt', 'pptx', 'odp'].includes(ext))
-        return React.createElement(FileType, { size: 14, className: "text-orange-500" });
-    if (['pdf'].includes(ext))
-        return React.createElement(FileText, { size: 14, className: "text-red-500" });
-
-    // Code/Scripts
-    if (['js', 'jsx', 'ts', 'tsx', 'mjs', 'cjs'].includes(ext))
-        return React.createElement(FileCode, { size: 14, className: "text-yellow-500" });
-    if (['py', 'pyc', 'pyw'].includes(ext))
-        return React.createElement(FileCode, { size: 14, className: "text-blue-400" });
-    if (['sh', 'bash', 'zsh', 'fish', 'bat', 'cmd', 'ps1'].includes(ext))
-        return React.createElement(Terminal, { size: 14, className: "text-green-400" });
-    if (['c', 'cpp', 'h', 'hpp', 'cc', 'cxx'].includes(ext))
-        return React.createElement(FileCode, { size: 14, className: "text-blue-600" });
-    if (['java', 'class', 'jar'].includes(ext))
-        return React.createElement(FileCode, { size: 14, className: "text-orange-600" });
-    if (['go'].includes(ext))
-        return React.createElement(FileCode, { size: 14, className: "text-cyan-500" });
-    if (['rs'].includes(ext))
-        return React.createElement(FileCode, { size: 14, className: "text-orange-400" });
-    if (['rb'].includes(ext))
-        return React.createElement(FileCode, { size: 14, className: "text-red-400" });
-    if (['php'].includes(ext))
-        return React.createElement(FileCode, { size: 14, className: "text-purple-500" });
-    if (['html', 'htm', 'xhtml'].includes(ext))
-        return React.createElement(Globe, { size: 14, className: "text-orange-500" });
-    if (['css', 'scss', 'sass', 'less'].includes(ext))
-        return React.createElement(FileCode, { size: 14, className: "text-blue-500" });
-    if (['vue', 'svelte'].includes(ext))
-        return React.createElement(FileCode, { size: 14, className: "text-green-500" });
-
-    // Config/Data
-    if (['json', 'json5'].includes(ext))
-        return React.createElement(FileCode, { size: 14, className: "text-yellow-600" });
-    if (['xml', 'xsl', 'xslt'].includes(ext))
-        return React.createElement(FileCode, { size: 14, className: "text-orange-400" });
-    if (['yml', 'yaml'].includes(ext))
-        return React.createElement(Settings, { size: 14, className: "text-pink-400" });
-    if (['toml', 'ini', 'conf', 'cfg', 'config'].includes(ext))
-        return React.createElement(Settings, { size: 14, className: "text-gray-400" });
-    if (['env'].includes(ext))
-        return React.createElement(Lock, { size: 14, className: "text-yellow-500" });
-    if (['sql', 'sqlite', 'db'].includes(ext))
-        return React.createElement(Database, { size: 14, className: "text-blue-400" });
-
-    // Images
-    if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'ico', 'tiff', 'tif', 'heic', 'heif', 'avif'].includes(ext))
-        return React.createElement(FileImage, { size: 14, className: "text-purple-400" });
-
-    // Videos
-    if (['mp4', 'mkv', 'avi', 'mov', 'wmv', 'flv', 'webm', 'm4v', '3gp', 'mpeg', 'mpg'].includes(ext))
-        return React.createElement(FileVideo, { size: 14, className: "text-pink-500" });
-
-    // Audio
-    if (['mp3', 'wav', 'flac', 'aac', 'ogg', 'm4a', 'wma', 'opus', 'aiff'].includes(ext))
-        return React.createElement(FileAudio, { size: 14, className: "text-green-400" });
-
-    // Archives
-    if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2', 'xz', 'tgz', 'tbz2', 'lz', 'lzma', 'cab', 'iso', 'dmg'].includes(ext))
-        return React.createElement(FileArchive, { size: 14, className: "text-amber-500" });
-
-    // Executables
-    if (['exe', 'msi', 'app', 'deb', 'rpm', 'apk', 'ipa'].includes(ext))
-        return React.createElement(File, { size: 14, className: "text-red-400" });
-    if (['dll', 'so', 'dylib'].includes(ext))
-        return React.createElement(File, { size: 14, className: "text-gray-500" });
-
-    // Keys/Certs
-    if (['pem', 'crt', 'cer', 'key', 'pub', 'ppk'].includes(ext))
-        return React.createElement(Key, { size: 14, className: "text-yellow-400" });
-
-    // Text/Markdown
-    if (['md', 'markdown', 'mdx'].includes(ext))
-        return React.createElement(FileText, { size: 14, className: "text-gray-400" });
-    if (['txt', 'log', 'text'].includes(ext))
-        return React.createElement(FileText, { size: 14, className: "text-muted-foreground" });
+    const iconDef = EXTENSION_ICON_MAP.get(ext);
+    if (iconDef) {
+        const [Icon, className] = iconDef;
+        return React.createElement(Icon, { size: 14, ...(className ? { className } : {}) });
+    }
 
     // Default
     return React.createElement(FileCode, { size: 14 });
@@ -180,6 +257,59 @@ export interface ColumnWidths {
     type: number;
 }
 
+export const buildSftpColumnTemplate = (columnWidths: ColumnWidths): string => {
+    return [
+        `minmax(140px, ${columnWidths.name}fr)`,
+        `minmax(0, ${columnWidths.modified}fr)`,
+        `minmax(52px, ${columnWidths.size}fr)`,
+        `minmax(64px, ${columnWidths.type}fr)`,
+    ].join(' ');
+};
+
+export const sortSftpEntries = (
+    entries: SftpFileEntry[],
+    sortField: SortField,
+    sortOrder: SortOrder,
+): SftpFileEntry[] => {
+    if (!entries.length) return entries;
+
+    const sorted = [...entries].sort((a, b) => {
+        const aIsDir = isNavigableDirectory(a);
+        const bIsDir = isNavigableDirectory(b);
+
+        if (sortField !== 'type') {
+            if (aIsDir && !bIsDir) return -1;
+            if (!aIsDir && bIsDir) return 1;
+        }
+
+        let cmp = 0;
+        switch (sortField) {
+            case 'name':
+                cmp = a.name.localeCompare(b.name);
+                break;
+            case 'size':
+                cmp = (a.size || 0) - (b.size || 0);
+                break;
+            case 'modified':
+                cmp = (a.lastModified || 0) - (b.lastModified || 0);
+                break;
+            case 'type': {
+                const extA = aIsDir
+                    ? 'folder'
+                    : a.name.split('.').pop()?.toLowerCase() || '';
+                const extB = bIsDir
+                    ? 'folder'
+                    : b.name.split('.').pop()?.toLowerCase() || '';
+                cmp = extA.localeCompare(extB);
+                break;
+            }
+        }
+        return sortOrder === 'asc' ? cmp : -cmp;
+    });
+
+    return sorted;
+};
+
 /**
  * Check if an entry is navigable like a directory
  * This includes regular directories and symlinks that point to directories

components/terminal/ZmodemProgressIndicator.tsx

@@ -0,0 +1,79 @@
+import { ArrowDownToLine, ArrowUpFromLine, X } from 'lucide-react';
+import React from 'react';
+
+interface ZmodemProgressIndicatorProps {
+  transferType: 'upload' | 'download' | null;
+  filename: string | null;
+  transferred: number;
+  total: number;
+  fileIndex: number;
+  fileCount: number;
+  finalizing: boolean;
+  onCancel: () => void;
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes <= 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), sizes.length - 1);
+  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
+}
+
+export const ZmodemProgressIndicator: React.FC<ZmodemProgressIndicatorProps> = ({
+  transferType,
+  filename,
+  transferred,
+  total,
+  fileIndex,
+  fileCount,
+  finalizing,
+  onCancel,
+}) => {
+  const percent = total > 0 ? Math.min(100, Math.round((transferred / total) * 100)) : 0;
+  const Icon = transferType === 'upload' ? ArrowUpFromLine : ArrowDownToLine;
+  const label = finalizing ? 'Waiting for remote...' : transferType === 'upload' ? 'Uploading' : 'Downloading';
+  const fileInfo = fileCount > 0 ? ` (${fileIndex + 1}/${fileCount})` : '';
+
+  return (
+    <div
+      className="flex items-center gap-2.5 px-3 py-2 rounded-lg shadow-lg backdrop-blur-sm min-w-[240px] max-w-[360px]"
+      style={{
+        backgroundColor: 'color-mix(in srgb, var(--terminal-ui-bg, #000000) 90%, transparent)',
+        border: '1px solid color-mix(in srgb, var(--terminal-ui-fg, #ffffff) 15%, var(--terminal-ui-bg, #000000))',
+        color: 'var(--terminal-ui-fg, #ffffff)',
+      }}
+      onClick={(e) => e.stopPropagation()}
+      onMouseDown={(e) => e.stopPropagation()}
+    >
+      <Icon className="h-4 w-4 flex-shrink-0 opacity-60" />
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center justify-between gap-2 mb-1">
+          <span className="text-xs font-medium truncate">
+            {filename || label}{fileInfo}
+          </span>
+          <span className="text-[10px] opacity-60 flex-shrink-0">{percent}%</span>
+        </div>
+        <div className="w-full h-1 rounded-full overflow-hidden" style={{ backgroundColor: 'color-mix(in srgb, var(--terminal-ui-fg, #ffffff) 10%, transparent)' }}>
+          <div
+            className="h-full rounded-full transition-all duration-150"
+            style={{
+              width: `${percent}%`,
+              backgroundColor: transferType === 'upload' ? '#3b82f6' : '#22c55e',
+            }}
+          />
+        </div>
+        <div className="text-[10px] opacity-50 mt-0.5">
+          {formatBytes(transferred)} / {formatBytes(total)}
+        </div>
+      </div>
+      <button
+        onClick={onCancel}
+        className="flex-shrink-0 p-1 rounded transition-colors hover:bg-white/10"
+        title="Cancel transfer (Ctrl+C)"
+      >
+        <X className="h-3.5 w-3.5 opacity-60" />
+      </button>
+    </div>
+  );
+};

components/terminal/autocomplete/AutocompletePopup.tsx

@@ -48,6 +48,8 @@ interface AutocompletePopupProps {
   onRequestReposition?: () => void;
   /** Offset from top of container to terminal content area (toolbar + search bar) */
   searchBarOffset?: number;
+  /** Called when user clicks outside the popup to dismiss it */
+  onDismiss?: () => void;
 }
 
 const SOURCE_LABELS: Record<SuggestionSource, { label: string; fullLabel: string; fallbackColor: string }> = {
@@ -105,7 +107,9 @@ const AutocompletePopup: React.FC<AutocompletePopupProps> = ({
   containerRef,
   onRequestReposition,
   searchBarOffset: _searchBarOffset = 30,
+  onDismiss,
 }) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
   const selectedRef = useRef<HTMLDivElement>(null);
   const [hoveredIndex, setHoveredIndex] = useState(-1);
@@ -148,6 +152,18 @@ const AutocompletePopup: React.FC<AutocompletePopupProps> = ({
     };
   }, [containerRef, onRequestReposition, visible]);
 
+  // Dismiss popup when clicking outside
+  useEffect(() => {
+    if (!visible || !onDismiss) return;
+    const handlePointerDown = (e: PointerEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+        onDismiss();
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [visible, onDismiss]);
+
   if (!visible || suggestions.length === 0) return null;
 
   const bg = themeColors?.background ?? "#1e1e2e";
@@ -217,6 +233,7 @@ const AutocompletePopup: React.FC<AutocompletePopupProps> = ({
 
   return (
     <div
+      ref={wrapperRef}
       style={{
         position: "fixed",
         left: `${clampedLeft}px`,

components/terminal/autocomplete/completionEngine.ts

@@ -191,12 +191,15 @@ export async function getCompletions(
   }
 
   if (preferPathSuggestions && ctx.commandName) {
+    // When path completion is active (file-related commands like cat, vim, cd),
+    // recent history is still useful but should rank below actual path matches
+    // from the current directory.
     const recentHistory = queryRecentHistoryByCommand({
       commandName: ctx.commandName,
       excludeCommand: input,
       argumentPrefix: normalizeHistoryPathPrefix(ctx.currentWord),
       hostId,
-      limit: 3,
+      limit: 5,
     });
     for (let index = 0; index < recentHistory.length; index++) {
       const entry = recentHistory[index];
@@ -205,7 +208,7 @@ export async function getCompletions(
         text: entry.command,
         displayText: entry.command,
         source: "history",
-        score: 900 - index,
+        score: 720 - index,
         frequency: entry.frequency,
       } satisfies CompletionSuggestion;
       suggestions.push(suggestion);

components/terminal/autocomplete/remotePathCompleter.ts

@@ -44,15 +44,36 @@ const CACHE_TTL_MS = 5000;
 const MAX_CACHE_SIZE = 30;
 const MAX_FILTERED_CACHE_SIZE = 60;
 
-/** Commands that commonly accept file/directory path arguments */
+/** Commands that commonly accept file/directory path arguments.
+ *  Subcommand-first tools (docker, kubectl, go, cargo, make) are excluded —
+ *  their path arguments are better handled via Fig specs. */
 const PATH_COMMANDS = new Set([
-  "cd", "ls", "ll", "la", "dir", "cat", "less", "more", "head", "tail",
-  "vim", "vi", "nvim", "nano", "emacs", "code", "subl",
-  "cp", "mv", "rm", "mkdir", "rmdir", "touch", "chmod", "chown", "chgrp",
-  "stat", "file", "source", ".", "bat", "rg", "find", "tree",
-  "tar", "zip", "unzip", "gzip", "gunzip",
-  "scp", "rsync", "diff",
-  "python", "python3", "node", "ruby", "perl", "bash", "sh", "zsh",
+  // Navigation & listing
+  "cd", "pushd", "ls", "ll", "la", "dir", "tree", "exa", "eza", "lsd",
+  // Viewing & editing
+  "cat", "less", "more", "head", "tail", "bat", "tac", "nl", "tee",
+  "vim", "vi", "nvim", "nano", "emacs", "code", "subl", "micro", "helix", "hx", "joe", "mcedit",
+  // File operations
+  "cp", "mv", "rm", "mkdir", "rmdir", "touch", "ln", "install", "shred",
+  // Permissions & metadata
+  "chmod", "chown", "chgrp", "stat", "file", "lsattr", "chattr",
+  // Search & filter
+  "find", "rg", "grep", "egrep", "fgrep", "ag", "fd", "locate",
+  "wc", "sort", "uniq", "cut", "awk", "sed",
+  // Archive & compression
+  "tar", "zip", "unzip", "gzip", "gunzip", "bzip2", "bunzip2", "xz", "unxz", "zstd",
+  "7z", "rar", "unrar",
+  // Transfer & sync
+  "scp", "rsync", "diff", "cmp", "patch",
+  // Scripting & execution
+  "source", ".", "bash", "sh", "zsh", "fish",
+  "python", "python3", "node", "ruby", "perl", "php", "rustc", "gcc", "g++",
+  "deno", "bun", "tsx", "ts-node",
+  // Disk & filesystem
+  "du", "df", "chroot",
+  // Misc
+  "realpath", "readlink", "basename", "dirname", "md5sum", "sha256sum", "xxd", "hexdump",
+  "xdg-open", "open", "start",
 ]);
 
 /** Commands that only accept directories (not files) */

components/terminal/autocomplete/useTerminalAutocomplete.ts

@@ -943,15 +943,15 @@ function resolveAutocompleteCwd(
   if (os === "windows") return fallbackCwd;
 
   const normalizedWord = currentWord.trim().replace(/^['"]/, "");
-  const isRelativePathWord = normalizedWord.length > 0 &&
-    !normalizedWord.startsWith("/") &&
-    !normalizedWord.startsWith("~/") &&
-    !normalizedWord.startsWith("-");
 
-  if (!isRelativePathWord) {
+  // Absolute or home-relative paths don't depend on cwd
+  if (normalizedWord.startsWith("/") || normalizedWord.startsWith("~/")) {
     return fallbackCwd;
   }
 
+  // For empty word (e.g. "cd ") and relative paths, try prompt-based cwd
+  // extraction which reflects the current visible prompt — more up-to-date
+  // than fallbackCwd when OSC 7 is not supported.
   const promptCwd = extractPosixCwdFromPrompt(promptText);
   return chooseAutocompleteCwd(promptCwd, fallbackCwd);
 }
@@ -963,15 +963,16 @@ function chooseAutocompleteCwd(
   if (!promptCwd) return fallbackCwd;
   if (!fallbackCwd) return promptCwd;
 
-  if (promptCwd.startsWith("/")) {
+  // Prompt cwd is extracted from the currently visible prompt, so it tracks
+  // directory changes even when OSC 7 is not supported. Prefer it over
+  // fallbackCwd (which may be stale from initial connection) whenever it
+  // looks like a usable path.
+  if (promptCwd.startsWith("/") || promptCwd === "~" || promptCwd.startsWith("~/")) {
     return promptCwd;
   }
 
-  if (promptCwd === "~" || promptCwd.startsWith("~/")) {
-    return fallbackCwd;
-  }
-
-  return promptCwd;
+  // Bare directory name (e.g. "xunlong") can't be used as a path — fallback
+  return fallbackCwd;
 }
 
 function extractPosixCwdFromPrompt(promptText: string): string | undefined {

components/terminal/hooks/useServerStats.ts

@@ -50,6 +50,7 @@ interface UseServerStatsOptions {
   refreshInterval: number;    // Refresh interval in seconds
   isSupportedOs: boolean;     // Only collect stats for Linux/macOS servers
   isConnected: boolean;       // Only collect when connected
+  isVisible: boolean;         // Pause background polling for hidden terminals
 }
 
 export function useServerStats({
@@ -58,6 +59,7 @@ export function useServerStats({
   refreshInterval,
   isSupportedOs,
   isConnected,
+  isVisible,
 }: UseServerStatsOptions) {
   const [stats, setStats] = useState<ServerStats>({
     cpu: null,
@@ -84,9 +86,12 @@ export function useServerStats({
   const [error, setError] = useState<string | null>(null);
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const isMountedRef = useRef(true);
+  const hasFetchedRef = useRef(false);
+  const connectedAtRef = useRef(0);
+  const fetchGenerationRef = useRef(0);
 
   const fetchStats = useCallback(async () => {
-    if (!enabled || !isSupportedOs || !isConnected || !sessionId) {
+    if (!enabled || !isSupportedOs || !isConnected || !isVisible || !sessionId) {
       return;
     }
 
@@ -95,15 +100,18 @@ export function useServerStats({
       return;
     }
 
+    const generation = ++fetchGenerationRef.current;
     setIsLoading(true);
     setError(null);
 
     try {
       const result = await bridge.getServerStats(sessionId);
 
-      if (!isMountedRef.current) return;
+      // Discard stale responses from before a hide/show cycle or reconnect
+      if (!isMountedRef.current || generation !== fetchGenerationRef.current) return;
 
       if (result.success && result.stats) {
+        hasFetchedRef.current = true;
         setStats({
           cpu: result.stats.cpu,
           cpuCores: result.stats.cpuCores,
@@ -129,15 +137,15 @@ export function useServerStats({
         setError(result.error);
       }
     } catch (err) {
-      if (isMountedRef.current) {
+      if (isMountedRef.current && generation === fetchGenerationRef.current) {
         setError(err instanceof Error ? err.message : 'Unknown error');
       }
     } finally {
-      if (isMountedRef.current) {
+      if (isMountedRef.current && generation === fetchGenerationRef.current) {
         setIsLoading(false);
       }
     }
-  }, [sessionId, enabled, isSupportedOs, isConnected]);
+  }, [sessionId, enabled, isSupportedOs, isConnected, isVisible]);
 
   // Initial fetch and periodic refresh
   useEffect(() => {
@@ -150,7 +158,10 @@ export function useServerStats({
     }
 
     if (!enabled || !isSupportedOs || !isConnected) {
-      // Reset stats when disabled or not connected
+      // Reset stats and fetch state when disabled or not connected
+      hasFetchedRef.current = false;
+      connectedAtRef.current = 0;
+
       setStats({
         cpu: null,
         cpuCores: null,
@@ -175,10 +186,43 @@ export function useServerStats({
       return;
     }
 
-    // Initial fetch with a small delay to let the connection stabilize
-    const initialTimer = setTimeout(() => {
-      fetchStats();
-    }, 2000);
+    // Track when the connection became available for delay calculation
+    // (must be before the isVisible check so hidden tabs record connection time)
+    if (connectedAtRef.current === 0) {
+      connectedAtRef.current = Date.now();
+    }
+
+    if (!isVisible) {
+      return () => {
+        isMountedRef.current = false;
+  
+        if (intervalRef.current) {
+          clearInterval(intervalRef.current);
+          intervalRef.current = null;
+        }
+      };
+    }
+
+    // Invalidate any in-flight request from a previous visible/hidden cycle
+    // so stale responses don't overwrite the reset network stats below.
+    fetchGenerationRef.current++;
+
+    // Fetch immediately when resuming from hidden, or with a delay on first connect.
+    // When resuming, reset delta-based network stats (both aggregate and per-interface)
+    // so the first sample doesn't show averaged-over-hidden-interval throughput.
+    if (hasFetchedRef.current) {
+      setStats(prev => ({
+        ...prev,
+        netRxSpeed: 0,
+        netTxSpeed: 0,
+        netInterfaces: prev.netInterfaces.map(iface => ({ ...iface, rxSpeed: 0, txSpeed: 0 })),
+      }));
+    }
+    // Skip the warmup delay if the connection has been established long enough
+    // (e.g., tab was hidden while connected and is now becoming visible).
+    const connectionAge = Date.now() - connectedAtRef.current;
+    const needsWarmup = !hasFetchedRef.current && connectionAge < 2000;
+    const initialTimer = setTimeout(fetchStats, needsWarmup ? 2000 : 0);
 
     // Set up periodic refresh
     const intervalMs = Math.max(5, refreshInterval) * 1000; // Minimum 5 seconds
@@ -192,7 +236,7 @@ export function useServerStats({
         intervalRef.current = null;
       }
     };
-  }, [enabled, isSupportedOs, isConnected, refreshInterval, fetchStats]);
+  }, [enabled, isSupportedOs, isConnected, isVisible, refreshInterval, fetchStats]);
 
   // Manual refresh function
   const refresh = useCallback(() => {

components/terminal/hooks/useTerminalSearch.ts

@@ -5,6 +5,22 @@ import type { RefObject } from "react";
 
 type SearchMatchCount = { current: number; total: number } | null;
 
+const SEARCH_DECORATIONS = {
+  matchBackground: "#FFFF0044",
+  matchBorder: "#FFFF00",
+  matchOverviewRuler: "#FFFF00",
+  activeMatchBackground: "#FF880088",
+  activeMatchBorder: "#FF8800",
+  activeMatchColorOverviewRuler: "#FF8800",
+} as const;
+
+const SEARCH_OPTIONS = {
+  regex: false,
+  caseSensitive: false,
+  wholeWord: false,
+  decorations: SEARCH_DECORATIONS,
+} as const;
+
 export const useTerminalSearch = ({
   searchAddonRef,
   termRef,
@@ -39,19 +55,7 @@ export const useTerminalSearch = ({
       searchTermRef.current = term;
       searchAddon.clearDecorations();
 
-      const found = searchAddon.findNext(term, {
-        regex: false,
-        caseSensitive: false,
-        wholeWord: false,
-        decorations: {
-          matchBackground: "#FFFF0044",
-          matchBorder: "#FFFF00",
-          matchOverviewRuler: "#FFFF00",
-          activeMatchBackground: "#FF880088",
-          activeMatchBorder: "#FF8800",
-          activeMatchColorOverviewRuler: "#FF8800",
-        },
-      });
+      const found = searchAddon.findNext(term, SEARCH_OPTIONS);
 
       if (found) {
         setSearchMatchCount({ current: 1, total: 1 });
@@ -68,38 +72,14 @@ export const useTerminalSearch = ({
     const searchAddon = searchAddonRef.current;
     const term = searchTermRef.current;
     if (!searchAddon || !term) return false;
-    return searchAddon.findNext(term, {
-      regex: false,
-      caseSensitive: false,
-      wholeWord: false,
-      decorations: {
-        matchBackground: "#FFFF0044",
-        matchBorder: "#FFFF00",
-        matchOverviewRuler: "#FFFF00",
-        activeMatchBackground: "#FF880088",
-        activeMatchBorder: "#FF8800",
-        activeMatchColorOverviewRuler: "#FF8800",
-      },
-    });
+    return searchAddon.findNext(term, SEARCH_OPTIONS);
   }, [searchAddonRef]);
 
   const handleFindPrevious = useCallback((): boolean => {
     const searchAddon = searchAddonRef.current;
     const term = searchTermRef.current;
     if (!searchAddon || !term) return false;
-    return searchAddon.findPrevious(term, {
-      regex: false,
-      caseSensitive: false,
-      wholeWord: false,
-      decorations: {
-        matchBackground: "#FFFF0044",
-        matchBorder: "#FFFF00",
-        matchOverviewRuler: "#FFFF00",
-        activeMatchBackground: "#FF880088",
-        activeMatchBorder: "#FF8800",
-        activeMatchColorOverviewRuler: "#FF8800",
-      },
-    });
+    return searchAddon.findPrevious(term, SEARCH_OPTIONS);
   }, [searchAddonRef]);
 
   const handleCloseSearch = useCallback(() => {

components/terminal/hooks/useZmodemTransfer.ts

@@ -0,0 +1,102 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { netcattyBridge } from '../../../infrastructure/services/netcattyBridge';
+
+export interface ZmodemTransferState {
+  active: boolean;
+  transferType: 'upload' | 'download' | null;
+  filename: string | null;
+  transferred: number;
+  total: number;
+  fileIndex: number;
+  fileCount: number;
+  finalizing: boolean;
+  error: string | null;
+}
+
+const initialState: ZmodemTransferState = {
+  active: false,
+  transferType: null,
+  filename: null,
+  transferred: 0,
+  total: 0,
+  fileIndex: 0,
+  fileCount: 0,
+  finalizing: false,
+  error: null,
+};
+
+export function useZmodemTransfer(sessionId: string | null) {
+  const [state, setState] = useState<ZmodemTransferState>(initialState);
+  const disposeRef = useRef<(() => void) | null>(null);
+
+  const disposeExitRef = useRef<(() => void) | null>(null);
+
+  useEffect(() => {
+    if (!sessionId) return;
+
+    const bridge = netcattyBridge.get();
+    if (!bridge?.onZmodemEvent) return;
+
+    disposeRef.current = bridge.onZmodemEvent(sessionId, (event) => {
+      switch (event.type) {
+        case 'detect':
+          setState({
+            active: true,
+            transferType: event.transferType ?? null,
+            filename: null,
+            transferred: 0,
+            total: 0,
+            fileIndex: 0,
+            fileCount: 0,
+            error: null,
+          });
+          break;
+        case 'progress':
+          setState((prev) => ({
+            ...prev,
+            active: true,
+            transferType: event.transferType ?? prev.transferType,
+            filename: event.filename ?? prev.filename,
+            transferred: event.transferred ?? prev.transferred,
+            total: event.total ?? prev.total,
+            fileIndex: event.fileIndex ?? prev.fileIndex,
+            fileCount: event.fileCount ?? prev.fileCount,
+            finalizing: !!((event as Record<string, unknown>).finalizing),
+          }));
+          break;
+        case 'complete':
+          setState((prev) => ({ ...prev, active: false }));
+          break;
+        case 'error':
+          setState((prev) => ({
+            ...prev,
+            active: false,
+            error: event.error ?? 'Unknown error',
+          }));
+          break;
+      }
+    });
+
+    // If the session exits mid-transfer (disconnect, shell exit, etc.),
+    // reset state so the progress indicator doesn't stay stuck.
+    disposeExitRef.current = bridge.onSessionExit(sessionId, () => {
+      setState(initialState);
+    });
+
+    return () => {
+      disposeRef.current?.();
+      disposeRef.current = null;
+      disposeExitRef.current?.();
+      disposeExitRef.current = null;
+      setState(initialState);
+    };
+  }, [sessionId]);
+
+  const cancel = useCallback(() => {
+    if (!sessionId) return;
+    const bridge = netcattyBridge.get();
+    bridge?.cancelZmodem?.(sessionId);
+  }, [sessionId]);
+
+  return { ...state, cancel };
+}

components/terminal/runtime/createTerminalSessionStarters.ts

@@ -172,7 +172,7 @@ const attachSessionToTerminal = (
   term: XTerm,
   id: string,
   opts?: {
-    onExitMessage?: (evt: { exitCode?: number; signal?: number }) => string;
+    onExitMessage?: (evt: { exitCode?: number; signal?: number; error?: string; reason?: string }) => string;
     onConnected?: () => void;
     // For serial: convert lone LF to CRLF to avoid "staircase effect"
     convertLfToCrlf?: boolean;
@@ -209,6 +209,9 @@ const attachSessionToTerminal = (
 
   ctx.disposeExitRef.current = ctx.terminalBackend.onSessionExit(id, (evt) => {
     ctx.updateStatus("disconnected");
+    if (evt.error) {
+      ctx.setError(evt.error);
+    }
     term.writeln(opts?.onExitMessage?.(evt) ?? "\r\n[session closed]");
 
     if (ctx.onTerminalDataCapture && ctx.serializeAddonRef.current) {
@@ -854,6 +857,7 @@ export const createTerminalSessionStarters = (ctx: TerminalSessionStartersContex
         stopBits: ctx.serialConfig.stopBits,
         parity: ctx.serialConfig.parity,
         flowControl: ctx.serialConfig.flowControl,
+        charset: ctx.host.charset,
         sessionLog: ctx.sessionLog?.enabled ? ctx.sessionLog : undefined,
       });