feat: sync Monaco editor background with UI theme

Define custom Monaco themes (netcatty-dark, netcatty-light) that inherit from built-in themes but use the app's background color from CSS variables. This ensures the text editor background matches the current UI theme, including Pure Black mode.

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/settings.local.json

@@ -1,7 +1,19 @@
 {
   "permissions": {
     "allow": [
-      "Bash(npx tsc:*)"
+      "Bash(npx tsc:*)",
+      "Bash(npm run lint:*)",
+      "Bash(npm run build:*)",
+      "Bash(gh pr view:*)",
+      "Bash(gh pr list:*)",
+      "Bash(gh api:*)",
+      "Bash(ls:*)",
+      "Bash(gh issue view:*)",
+      "Bash(npm run dev:*)",
+      "Bash(git checkout:*)",
+      "Bash(git commit -m \"$\\(cat <<''EOF''\nfeat\\(sftp\\): bundle folder uploads and improve cancel/delete operations\n\n- Bundle folder uploads as single tasks showing aggregate progress\n- Add unique file transfer IDs for proper cancellation tracking\n- Fix cancel button to call cancelExternalUpload for external uploads\n- Improve backend cancel detection using cancelled flag instead of error message\n- Use SSH exec with rm -rf for fast folder deletion on remote servers\n- Add FolderUp icon for folder upload tasks in transfer queue\n- Add i18n key for upload cancelled message\n\nCo-Authored-By: Claude <noreply@anthropic.com>\nEOF\n\\)\")",
+      "Bash(git push:*)",
+      "Bash(gh pr create --title \"feat\\(sftp\\): bundle folder uploads and improve cancel/delete operations\" --body \"$\\(cat <<''EOF''\n## Summary\n\n- **Bundle folder uploads as single tasks** - When uploading a folder from computer, show it as one aggregated task with total progress instead of individual files\n- **Fix cancel upload** - Properly cancel external uploads by calling the correct cancel function and using unique file transfer IDs for backend tracking\n- **Fast folder deletion** - Use SSH exec with `rm -rf` command for remote folder deletion instead of slow recursive SFTP rmdir\n- **UI improvements** - Add FolderUp icon for folder upload tasks, add cancelled status toast message\n\n## Changes\n\n### Bundle folder uploads\n- Added `detectRootFolders` helper to group entries by root folder\n- Create single bundled task per folder with aggregate byte count\n- Track progress across all files in the bundle\n\n### Fix cancel upload\n- Each file now uses unique `fileTransferId` for backend cancellation tracking\n- Added `activeFileTransferIdsRef` to track all active uploads\n- Modified `cancelExternalUpload` to cancel all active file uploads\n- Backend now checks `uploadState.cancelled` flag instead of just error message\n- Frontend catch block checks `cancelUploadRef.current` to break out of loop\n\n### Fast folder deletion\n- Added `execSshCommand` helper function in sftpBridge.cjs\n- Uses `client.client` \\(underlying ssh2 Client\\) to execute `rm -rf` command\n- Falls back to SFTP rmdir if SSH exec fails\n\n## Test plan\n- [ ] Drag a folder from computer to SFTP pane - should show as single task with aggregate progress\n- [ ] Click cancel button during folder upload - should stop immediately without errors\n- [ ] Delete a large folder on remote server - should complete quickly using rm -rf\n\n🤖 Generated with [Claude Code]\\(https://claude.com/claude-code\\)\nEOF\n\\)\")"
     ]
   }
 }

.github/workflows/build.yml

@@ -2,6 +2,11 @@ name: build-packages
 
 on:
   workflow_dispatch:
+    inputs:
+      publish_release:
+        description: "Publish GitHub Release after build"
+        type: boolean
+        default: false
   push:
     tags:
       - "v*"
@@ -13,7 +18,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        os: [macos-latest, windows-latest]
+        os: [macos-latest, windows-latest, ubuntu-latest]
     env:
       VITE_SYNC_GITHUB_CLIENT_ID: ${{ secrets.VITE_SYNC_GITHUB_CLIENT_ID }}
       VITE_SYNC_GOOGLE_CLIENT_ID: ${{ secrets.VITE_SYNC_GOOGLE_CLIENT_ID }}
@@ -53,6 +58,12 @@ jobs:
           ELECTRON_BUILDER_PUBLISH: "never"
         run: npm run pack:win
 
+      - name: Build package (Linux)
+        if: matrix.os == 'ubuntu-latest'
+        env:
+          ELECTRON_BUILDER_PUBLISH: "never"
+        run: npm run pack:linux
+
       - name: Upload artifacts
         uses: actions/upload-artifact@v4
         with:
@@ -74,7 +85,7 @@ jobs:
     name: release
     runs-on: ubuntu-latest
     needs: build
-    if: startsWith(github.ref, 'refs/tags/')
+    if: startsWith(github.ref, 'refs/tags/') || (github.event_name == 'workflow_dispatch' && inputs.publish_release)
     permissions:
       contents: write
     steps:

.gitignore

@@ -22,6 +22,7 @@ coverage
 /release
 /out
 *.asar
+/public/monaco
 
 # Editor directories and files
 .vscode/*

App.tsx

@@ -1,11 +1,14 @@
 import React, { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { activeTabStore, useActiveTabId, useIsSftpActive, useIsTerminalLayerVisible, useIsVaultActive } from './application/state/activeTabStore';
 import { useAutoSync } from './application/state/useAutoSync';
+import { usePortForwardingAutoStart } from './application/state/usePortForwardingAutoStart';
 import { useSessionState } from './application/state/useSessionState';
 import { useSettingsState } from './application/state/useSettingsState';
 import { useUpdateCheck } from './application/state/useUpdateCheck';
 import { useVaultState } from './application/state/useVaultState';
 import { useWindowControls } from './application/state/useWindowControls';
+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 { resolveHostAuth } from './domain/sshAuth';
@@ -17,12 +20,17 @@ import { Input } from './components/ui/input';
 import { Label } from './components/ui/label';
 import { ToastProvider, toast } from './components/ui/toast';
 import { VaultView, VaultSection } from './components/VaultView';
+import { KeyboardInteractiveModal, KeyboardInteractiveRequest } from './components/KeyboardInteractiveModal';
 import { cn } from './lib/utils';
-import { ConnectionLog, Host, HostProtocol, TerminalTheme } from './types';
+import { ConnectionLog, Host, HostProtocol, SerialConfig, TerminalTheme } from './types';
 import { LogView as LogViewType } from './application/state/useSessionState';
 import type { SftpView as SftpViewComponent } from './components/SftpView';
 import type { TerminalLayer as TerminalLayerComponent } from './components/TerminalLayer';
 
+// Initialize fonts eagerly at app startup
+initializeFonts();
+initializeUIFonts();
+
 // Visibility container for VaultView - isolates isActive subscription
 const VaultViewContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const isActive = useIsVaultActive();
@@ -145,6 +153,8 @@ function App({ settings }: { settings: SettingsState }) {
   const [protocolSelectHost, setProtocolSelectHost] = useState<Host | null>(null);
   // Navigation state for VaultView sections
   const [navigateToSection, setNavigateToSection] = useState<VaultSection | null>(null);
+  // Keyboard-interactive authentication queue (2FA/MFA) - queue-based to handle multiple concurrent sessions
+  const [keyboardInteractiveQueue, setKeyboardInteractiveQueue] = useState<KeyboardInteractiveRequest[]>([]);
 
   const {
     theme,
@@ -159,6 +169,9 @@ function App({ settings }: { settings: SettingsState }) {
     hotkeyScheme,
     keyBindings,
     isHotkeyRecording,
+    sessionLogsEnabled,
+    sessionLogsDir,
+    sessionLogsFormat,
   } = settings;
 
   const {
@@ -280,6 +293,61 @@ function App({ settings }: { settings: SettingsState }) {
     }
   }, [updateState.hasUpdate, updateState.latestRelease, t, openReleasePage, dismissUpdate]);
 
+  // Memoize keys for port forwarding to prevent unnecessary re-renders
+  const portForwardingKeys = useMemo(
+    () => keys.map((k) => ({ id: k.id, privateKey: k.privateKey })),
+    [keys]
+  );
+
+  // Auto-start port forwarding rules on app launch
+  usePortForwardingAutoStart({
+    hosts,
+    keys: portForwardingKeys,
+  });
+
+  // Keyboard-interactive authentication (2FA/MFA) event listener
+  useEffect(() => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.onKeyboardInteractive) return;
+
+    const unsubscribe = bridge.onKeyboardInteractive((request) => {
+      console.log('[App] Keyboard-interactive request received:', request);
+      // Add to queue instead of replacing - supports multiple concurrent sessions
+      setKeyboardInteractiveQueue(prev => [...prev, {
+        requestId: request.requestId,
+        name: request.name,
+        instructions: request.instructions,
+        prompts: request.prompts,
+        hostname: request.hostname,
+        savedPassword: request.savedPassword,
+      }]);
+    });
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, []);
+
+  // Handle keyboard-interactive submit
+  const handleKeyboardInteractiveSubmit = useCallback((requestId: string, responses: string[]) => {
+    const bridge = netcattyBridge.get();
+    if (bridge?.respondKeyboardInteractive) {
+      void bridge.respondKeyboardInteractive(requestId, responses, false);
+    }
+    // Remove from queue by requestId
+    setKeyboardInteractiveQueue(prev => prev.filter(r => r.requestId !== requestId));
+  }, []);
+
+  // Handle keyboard-interactive cancel
+  const handleKeyboardInteractiveCancel = useCallback((requestId: string) => {
+    const bridge = netcattyBridge.get();
+    if (bridge?.respondKeyboardInteractive) {
+      void bridge.respondKeyboardInteractive(requestId, [], true);
+    }
+    // Remove from queue by requestId
+    setKeyboardInteractiveQueue(prev => prev.filter(r => r.requestId !== requestId));
+  }, []);
+
   // Debounce ref for moveFocus to prevent double-triggering when focus switches
   const lastMoveFocusTimeRef = useRef<number>(0);
   const MOVE_FOCUS_DEBOUNCE_MS = 200;
@@ -557,7 +625,7 @@ function App({ settings }: { settings: SettingsState }) {
         (h.group || '').toLowerCase().includes(term)
       )
       : hosts;
-    return filtered.slice(0, 8);
+    return filtered;
   }, [hosts, quickSearch, isQuickSwitcherOpen]);
 
   const handleDeleteHost = useCallback((hostId: string) => {
@@ -608,6 +676,25 @@ function App({ settings }: { settings: SettingsState }) {
   // Wrapper to connect to host with logging
   const handleConnectToHost = useCallback((host: Host) => {
     const { username, hostname: localHost } = systemInfoRef.current;
+
+    // Handle serial hosts separately
+    if (host.protocol === 'serial') {
+      const portName = host.hostname.split('/').pop() || host.hostname;
+      addConnectionLog({
+        hostId: host.id,
+        hostLabel: host.label || `Serial: ${portName}`,
+        hostname: host.hostname,
+        username: username,
+        protocol: 'serial',
+        startTime: Date.now(),
+        localUsername: username,
+        localHostname: localHost,
+        saved: false,
+      });
+      connectToHost(host);
+      return;
+    }
+
     const protocol = host.moshEnabled ? 'mosh' : (host.protocol || 'ssh');
     const resolvedAuth = resolveHostAuth({ host, keys, identities });
     addConnectionLog({
@@ -624,6 +711,24 @@ function App({ settings }: { settings: SettingsState }) {
     connectToHost(host);
   }, [addConnectionLog, connectToHost, identities, keys]);
 
+  // Wrapper to create serial session with logging
+  const handleConnectSerial = useCallback((config: SerialConfig) => {
+    const { username, hostname } = systemInfoRef.current;
+    const portName = config.path.split('/').pop() || config.path;
+    addConnectionLog({
+      hostId: '',
+      hostLabel: `Serial: ${portName}`,
+      hostname: config.path,
+      username: username,
+      protocol: 'serial',
+      startTime: Date.now(),
+      localUsername: username,
+      localHostname: hostname,
+      saved: false,
+    });
+    createSerialSession(config);
+  }, [addConnectionLog, createSerialSession]);
+
   // Handle terminal data capture when session exits
   const handleTerminalDataCapture = useCallback((sessionId: string, data: string) => {
     if (IS_DEV) console.log('[handleTerminalDataCapture] Called', { sessionId, dataLength: data.length });
@@ -657,10 +762,32 @@ function App({ settings }: { settings: SettingsState }) {
         terminalData: data,
       });
       if (IS_DEV) console.log('[handleTerminalDataCapture] Updated log with terminalData');
+
+      // Auto-save session log if enabled
+      if (sessionLogsEnabled && sessionLogsDir && data) {
+        import('./infrastructure/services/netcattyBridge').then(({ netcattyBridge }) => {
+          const bridge = netcattyBridge.get();
+          if (bridge?.autoSaveSessionLog) {
+            bridge.autoSaveSessionLog({
+              terminalData: data,
+              hostLabel: matchingLog.hostLabel,
+              hostname: matchingLog.hostname,
+              hostId: matchingLog.hostId,
+              startTime: matchingLog.startTime,
+              format: sessionLogsFormat,
+              directory: sessionLogsDir,
+            }).then(result => {
+              if (IS_DEV) console.log('[handleTerminalDataCapture] Auto-save result:', result);
+            }).catch(err => {
+              console.error('[handleTerminalDataCapture] Auto-save failed:', err);
+            });
+          }
+        });
+      }
     } else {
       if (IS_DEV) console.log('[handleTerminalDataCapture] No matching log found!');
     }
-  }, [sessions, connectionLogs, updateConnectionLog]);
+  }, [sessions, connectionLogs, updateConnectionLog, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat]);
 
   // Check if host has multiple protocols enabled
   const hasMultipleProtocols = useCallback((host: Host) => {
@@ -765,7 +892,7 @@ function App({ settings }: { settings: SettingsState }) {
             onOpenSettings={handleOpenSettings}
             onOpenQuickSwitcher={handleOpenQuickSwitcher}
             onCreateLocalTerminal={handleCreateLocalTerminal}
-            onConnectSerial={createSerialSession}
+            onConnectSerial={handleConnectSerial}
             onDeleteHost={handleDeleteHost}
             onConnect={handleConnectToHost}
             onUpdateHosts={updateHosts}
@@ -941,6 +1068,19 @@ function App({ settings }: { settings: SettingsState }) {
           />
         </Suspense>
       )}
+
+      {/* Global Keyboard-Interactive Authentication Modal (2FA/MFA) - processes queue */}
+      <KeyboardInteractiveModal
+        request={keyboardInteractiveQueue[0] || null}
+        onSubmit={handleKeyboardInteractiveSubmit}
+        onCancel={handleKeyboardInteractiveCancel}
+      />
+      {/* Indicator when more 2FA requests are pending */}
+      {keyboardInteractiveQueue.length > 1 && (
+        <div className="fixed bottom-4 right-4 z-50 bg-muted/90 backdrop-blur-sm text-sm px-3 py-1.5 rounded-full border shadow-sm">
+          {keyboardInteractiveQueue.length - 1} more pending
+        </div>
+      )}
     </div>
   );
 }

README.ja-JP.md

@@ -5,7 +5,8 @@
 <h1 align="center">Netcatty</h1>
 
 <p align="center">
-  <strong>モダンな SSH クライアント、SFTP ブラウザ & ターミナルマネージャー</strong>
+  <strong>モダンな SSH クライアント、SFTP ブラウザ & ターミナルマネージャー</strong><br/>
+  <a href="https://netcatty.app"><strong>netcatty.app</strong></a>
 </p>
 
 <p align="center">
@@ -39,7 +40,7 @@
 
 ---
 
-[![Netcatty メインインターフェース](screenshots/main-window-dark.png)](screenshots/main-window-dark.png)
+[![Netcatty メインインターフェース](screenshots/vault_grid_view.png)](screenshots/vault_grid_view.png)
 
 ---
 
@@ -138,15 +139,15 @@ Vault ビューはすべての SSH 接続を管理するコマンドセンター
 
 **ダークモード**
 
-![ダークモード](screenshots/main-window-dark.png)
+![ホスト管理](screenshots/vault_grid_view.png)
 
-**ライトモード**
+**ネストされたフォルダと整理**
 
-![ライトモード](screenshots/main-window-light.png)
+![ネストされたフォルダ](screenshots/nested_folder_structure.png)
 
 **リストビュー**
 
-![リストビュー](screenshots/main-window-dark-list.png)
+![リストビュー](screenshots/vault_list_view.png)
 
 <a name="ターミナル"></a>
 ## ターミナル
@@ -155,18 +156,28 @@ WebGL アクセラレーション対応の xterm.js ベースのターミナル
 
 **分割ウィンドウ**
 
-![分割ウィンドウ](screenshots/split-window.png)
+**ブロードキャストモード**
 
-**テーマカスタマイズ**
+一度入力すれば、どこでも実行できます。複数のサーバーを同時にメンテナンスするのに最適です。
 
-![テーマカスタマイズ](screenshots/terminal-theme-change.png)
+![ブロードキャストモード](screenshots/broadcast_mode.png)
+
+**パフォーマンス情報とカスタマイズ**
+
+接続の健全性を監視し、ターミナルのあらゆる側面をカスタマイズします。
+
+![ターミナルパフォーマンス](screenshots/terminal_performance.png)
 
 <a name="sftp"></a>
 ## SFTP
 
 デュアルペイン SFTP ブラウザは、ローカルからリモート、リモートからリモートへのファイル転送をサポート。シングルクリックでディレクトリを移動、ペイン間でファイルをドラッグ＆ドロップ、転送進捗をリアルタイムで監視。インターフェースにはファイル権限、サイズ、変更日時を表示。複数の転送をキューに入れ、詳細な速度と進捗インジケーターで完了を確認。コンテキストメニューから名前変更、削除、ダウンロード、アップロード操作にすばやくアクセス。
 
-![SFTP ビュー](screenshots/sftp.png)
+![SFTP デュアルペイン](screenshots/sftp_dual_pane.png)
+
+**転送キュー**
+
+![転送キュー](screenshots/sftp_transfer_queue.png)
 
 <a name="キーチェーン"></a>
 ## キーチェーン
@@ -188,6 +199,10 @@ WebGL アクセラレーション対応の xterm.js ベースのターミナル
 
 ![キーマネージャー](screenshots/key-manager.png)
 
+**キー生成**
+
+![キー生成](screenshots/key_generator_ui.png)
+
 <a name="ポートフォワーディング"></a>
 ## ポートフォワーディング
 
@@ -365,6 +380,17 @@ npm run pack:linux   # Linux (AppImage, deb, rpm)
 
 ---
 
+<a name="コントリビューター"></a>
+# コントリビューター
+
+貢献してくれたすべての人々に感謝します！
+
+<a href="https://github.com/binaricat/Netcatty/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=binaricat/Netcatty" alt="contributors" />
+</a>
+
+---
+
 <a name="ライセンス"></a>
 # ライセンス
 

README.md

@@ -5,7 +5,8 @@
 <h1 align="center">Netcatty</h1>
 
 <p align="center">
-  <strong>Modern SSH Client, SFTP Browser & Terminal Manager</strong>
+  <strong>Modern SSH Client, SFTP Browser & Terminal Manager</strong><br/>
+  <a href="https://netcatty.app"><strong>netcatty.app</strong></a>
 </p>
 
 <p align="center">
@@ -16,7 +17,7 @@
 <p align="center">
   <a href="https://github.com/binaricat/Netcatty/releases/latest"><img alt="GitHub Release" src="https://img.shields.io/github/v/release/binaricat/Netcatty?style=for-the-badge&logo=github&label=Release"></a>
   &nbsp;
-  <a href="#"><img alt="Platform" src="https://img.shields.io/badge/Platform-macOS%20%7C%20Windows-blue?style=for-the-badge&logo=electron"></a>
+  <a href="#"><img alt="Platform" src="https://img.shields.io/badge/Platform-macOS%20%7C%20Windows%20%7C%20Linux-blue?style=for-the-badge&logo=electron"></a>
   &nbsp;
   <a href="LICENSE"><img alt="License" src="https://img.shields.io/badge/License-GPL--3.0-green?style=for-the-badge"></a>
 </p>
@@ -39,7 +40,7 @@
 
 ---
 
-[![Netcatty Main Interface](screenshots/main-window-dark.png)](screenshots/main-window-dark.png)
+[![Netcatty Main Interface](screenshots/vault_grid_view.png)](screenshots/vault_grid_view.png)
 
 ---
 
@@ -67,7 +68,7 @@
 <a name="what-is-netcatty"></a>
 # What is Netcatty
 
-**Netcatty** is a modern SSH client and terminal manager for macOS and Windows, designed for developers, sysadmins, and DevOps engineers who need to manage multiple remote servers efficiently.
+**Netcatty** is a modern SSH client and terminal manager for macOS, Windows, and Linux, designed for developers, sysadmins, and DevOps engineers who need to manage multiple remote servers efficiently.
 
 - **Netcatty is** an alternative to PuTTY, Termius, SecureCRT, and macOS Terminal.app for SSH connections
 - **Netcatty is** a powerful SFTP client with dual-pane file browser
@@ -138,15 +139,15 @@ The Vault view is your command center for managing all SSH connections. Create h
 
 **Dark Mode**
 
-![Dark Mode](screenshots/main-window-dark.png)
+![Host Management](screenshots/vault_grid_view.png)
 
-**Light Mode**
+**Nested Folders & Organization**
 
-![Light Mode](screenshots/main-window-light.png)
+![Nested Folders](screenshots/nested_folder_structure.png)
 
 **List View**
 
-![List View](screenshots/main-window-dark-list.png)
+![List View](screenshots/vault_list_view.png)
 
 <a name="terminal"></a>
 ## Terminal
@@ -155,18 +156,28 @@ Powered by xterm.js with WebGL acceleration, the terminal delivers a smooth, res
 
 **Split Windows**
 
-![Split Windows](screenshots/split-window.png)
+**Broadcast Mode**
 
-**Theme Customization**
+Type once, execute everywhere. Great for maintaining multiple servers simultaneously.
 
-![Theme Customization](screenshots/terminal-theme-change.png)
+![Broadcast Mode](screenshots/broadcast_mode.png)
+
+**Performance Info & Customization**
+
+Monitor your connection health and customize every aspect of your terminal.
+
+![Terminal Performance](screenshots/terminal_performance.png)
 
 <a name="sftp"></a>
 ## SFTP
 
 The dual-pane SFTP browser supports local-to-remote and remote-to-remote file transfers. Navigate directories with single-click, drag files between panes, and monitor transfer progress in real-time. The interface shows file permissions, sizes, and modification dates. Queue multiple transfers and watch them complete with detailed speed and progress indicators. Context menus provide quick access to rename, delete, download, and upload operations.
 
-![SFTP View](screenshots/sftp.png)
+![SFTP Dual Pane](screenshots/sftp_dual_pane.png)
+
+**Transfer Queue**
+
+![Transfer Queue](screenshots/sftp_transfer_queue.png)
 
 <a name="keychain"></a>
 ## Keychain
@@ -188,6 +199,10 @@ The Keychain is your secure vault for SSH credentials. Generate new keys, import
 
 ![Key Manager](screenshots/key-manager.png)
 
+**Key Generator**
+
+![Key Generator](screenshots/key_generator_ui.png)
+
 <a name="port-forwarding"></a>
 ## Port Forwarding
 
@@ -279,7 +294,7 @@ Or browse all releases at [GitHub Releases](https://github.com/binaricat/Netcatt
 
 ### Prerequisites
 - Node.js 18+ and npm
-- macOS or Windows 10+
+- macOS, Windows 10+, or Linux
 
 ### Development
 
@@ -329,6 +344,7 @@ npm run pack
 # Package for specific platforms
 npm run pack:mac     # macOS (DMG + ZIP)
 npm run pack:win     # Windows (NSIS installer)
+npm run pack:linux   # Linux (AppImage + DEB + RPM)
 ```
 
 ---
@@ -364,6 +380,17 @@ See [agents.md](agents.md) for architecture overview and coding conventions.
 
 ---
 
+<a name="contributors"></a>
+# Contributors
+
+Thanks to all the people who contribute!
+
+<a href="https://github.com/binaricat/Netcatty/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=binaricat/Netcatty" alt="contributors" />
+</a>
+
+---
+
 <a name="license"></a>
 # License
 

README.zh-CN.md

@@ -5,7 +5,8 @@
 <h1 align="center">Netcatty</h1>
 
 <p align="center">
-  <strong>现代化 SSH 客户端、SFTP 浏览器 & 终端管理器</strong>
+  <strong>现代化 SSH 客户端、SFTP 浏览器 & 终端管理器</strong><br/>
+  <a href="https://netcatty.app"><strong>netcatty.app</strong></a>
 </p>
 
 <p align="center">
@@ -39,7 +40,7 @@
 
 ---
 
-[![Netcatty 主界面](screenshots/main-window-dark.png)](screenshots/main-window-dark.png)
+[![Netcatty 主界面](screenshots/vault_grid_view.png)](screenshots/vault_grid_view.png)
 
 ---
 
@@ -138,15 +139,15 @@ Vault 视图是管理所有 SSH 连接的控制中心。通过右键菜单创建
 
 **深色模式**
 
-![深色模式](screenshots/main-window-dark.png)
+![主机管理](screenshots/vault_grid_view.png)
 
-**浅色模式**
+**层级文件夹与分组**
 
-![浅色模式](screenshots/main-window-light.png)
+![层级文件夹](screenshots/nested_folder_structure.png)
 
 **列表视图**
 
-![列表视图](screenshots/main-window-dark-list.png)
+![列表视图](screenshots/vault_list_view.png)
 
 <a name="终端"></a>
 ## 终端
@@ -155,18 +156,28 @@ Vault 视图是管理所有 SSH 连接的控制中心。通过右键菜单创建
 
 **分屏窗口**
 
-![分屏窗口](screenshots/split-window.png)
+**广播模式**
 
-**主题定制**
+一次输入，多处执行。非常适合同时维护这多台服务器。
 
-![主题定制](screenshots/terminal-theme-change.png)
+![广播模式](screenshots/broadcast_mode.png)
+
+**性能信息与定制**
+
+监控连接健康状况，并自定义终端的方方面面。
+
+![终端性能](screenshots/terminal_performance.png)
 
 <a name="sftp"></a>
 ## SFTP
 
 双窗格 SFTP 浏览器支持本地到远程和远程到远程的文件传输。单击导航目录，在窗格之间拖放文件，实时监控传输进度。界面显示文件权限、大小和修改日期。批量传输队列管理，详细的速度和进度指示器。右键菜单快速访问重命名、删除、下载和上传操作。
 
-![SFTP 视图](screenshots/sftp.png)
+![SFTP 双窗格](screenshots/sftp_dual_pane.png)
+
+**传输队列**
+
+![传输队列](screenshots/sftp_transfer_queue.png)
 
 <a name="密钥管理"></a>
 ## 密钥管理
@@ -188,6 +199,10 @@ Vault 视图是管理所有 SSH 连接的控制中心。通过右键菜单创建
 
 ![密钥管理器](screenshots/key-manager.png)
 
+**密钥生成器**
+
+![密钥生成器](screenshots/key_generator_ui.png)
+
 <a name="端口转发"></a>
 ## 端口转发
 
@@ -365,6 +380,17 @@ npm run pack:linux   # Linux (AppImage, deb, rpm)
 
 ---
 
+<a name="贡献者"></a>
+# 贡献者
+
+感谢所有参与贡献的人！
+
+<a href="https://github.com/binaricat/Netcatty/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=binaricat/Netcatty" alt="contributors" />
+</a>
+
+---
+
 <a name="开源协议"></a>
 # 开源协议
 

agents.md

@@ -31,6 +31,7 @@ This project is wired around three layers: domain (pure logic), application stat
 ## Data & Storage
 - Persisted keys: see `storageKeys.ts`. Use `localStorageAdapter` for all reads/writes.
 - Seed data: `config/defaultData.ts`; terminal themes: `config/terminalThemes.ts`.
+- **Temporary files**: All temporary files (e.g., SFTP downloaded files for external editing) must be written to Netcatty's dedicated temp directory via `tempDirBridge.getTempFilePath(fileName)`. Do not write directly to `os.tmpdir()`. This ensures proper cleanup and user visibility in Settings > System.
 
 ## Testing & Safety
 - Favor unit tests for domain helpers (e.g., `workspace.ts`, `host.ts`) and hook-level tests for application state.

application/i18n/locales/en.ts

@@ -61,6 +61,39 @@ const en: Messages = {
   'settings.tab.terminal': 'Terminal',
   'settings.tab.shortcuts': 'Shortcuts',
   'settings.tab.syncCloud': 'Sync & Cloud',
+  'settings.tab.system': 'System',
+
+  // Settings > System
+  'settings.system.title': 'System',
+  'settings.system.description': 'System information and temporary file management.',
+  'settings.system.tempDirectory': 'Temporary Files',
+  'settings.system.location': 'Location',
+  'settings.system.fileCount': 'Files',
+  'settings.system.totalSize': 'Size',
+  'settings.system.openFolder': 'Open folder',
+  'settings.system.refresh': 'Refresh',
+  'settings.system.clearTempFiles': 'Clear temp files',
+  'settings.system.clearing': 'Clearing...',
+  'settings.system.clearResult': 'Deleted {deleted} file(s), {failed} failed.',
+  'settings.system.tempDirectoryHint': 'Temporary files are created when opening remote files with external applications. They are automatically cleaned up when SFTP sessions close.',
+
+  // Settings > Session Logs
+  'settings.sessionLogs.title': 'Session Logs',
+  'settings.sessionLogs.description': 'Configure session log export and auto-save settings.',
+  'settings.sessionLogs.autoSave': 'Auto-Save',
+  'settings.sessionLogs.enableAutoSave': 'Enable auto-save',
+  'settings.sessionLogs.enableAutoSaveDesc': 'Automatically save session logs when terminal sessions end.',
+  'settings.sessionLogs.directory': 'Save Directory',
+  'settings.sessionLogs.noDirectory': 'No directory selected',
+  'settings.sessionLogs.browse': 'Browse',
+  'settings.sessionLogs.openFolder': 'Open folder',
+  'settings.sessionLogs.directoryHint': 'Logs will be organized by host in subdirectories.',
+  'settings.sessionLogs.format': 'Log Format',
+  'settings.sessionLogs.formatDesc': 'Choose the format for saved log files.',
+  'settings.sessionLogs.formatTxt': 'Plain Text (.txt)',
+  'settings.sessionLogs.formatRaw': 'Raw with ANSI (.log)',
+  'settings.sessionLogs.formatHtml': 'HTML (.html)',
+  'settings.sessionLogs.hint': 'Session logs capture all terminal output for troubleshooting and auditing purposes.',
 
   // Settings > Application
   'settings.application.checkUpdates': 'Check for updates',
@@ -104,9 +137,15 @@ const en: Messages = {
     '/* Example: */\n.terminal { background: #1a1a2e !important; }\n:root { --radius: 0.25rem; }',
   'settings.appearance.language': 'Language',
   'settings.appearance.language.desc': 'Choose the UI language',
+  'settings.appearance.uiFont': 'Interface Font',
+  'settings.appearance.uiFont.desc': 'Choose the font for the application interface',
 
   // Settings > Terminal
   'settings.terminal.section.theme': 'Terminal Theme',
+  'settings.terminal.themeModal.title': 'Select Theme',
+  'settings.terminal.themeModal.darkThemes': 'Dark Themes',
+  'settings.terminal.themeModal.lightThemes': 'Light Themes',
+  'settings.terminal.theme.selectButton': 'Select Theme',
   'settings.terminal.section.font': 'Font',
   'settings.terminal.section.cursor': 'Cursor',
   'settings.terminal.section.keyboard': 'Keyboard',
@@ -179,6 +218,21 @@ const en: Messages = {
   'settings.terminal.localShell.startDir.placeholder': 'Home directory',
   'settings.terminal.localShell.startDir.notFound': 'Directory not found',
   'settings.terminal.localShell.startDir.isFile': 'Path is a file, not a directory',
+  'settings.terminal.section.connection': 'Connection',
+  'settings.terminal.connection.keepaliveInterval': 'Keepalive Interval',
+  'settings.terminal.connection.keepaliveInterval.desc': 'How often (in seconds) to send SSH-level keepalive packets to server. Set to 0 to disable.',
+  'settings.terminal.section.serverStats': 'Server Stats (Linux)',
+  'settings.terminal.serverStats.show': 'Show Server Stats',
+  'settings.terminal.serverStats.show.desc': 'Display CPU, memory, and disk usage in the terminal statusbar (Linux servers only).',
+  'settings.terminal.serverStats.refreshInterval': 'Refresh Interval',
+  'settings.terminal.serverStats.refreshInterval.desc': 'How often to refresh server stats.',
+  'settings.terminal.serverStats.seconds': 'seconds',
+
+  // Settings > Terminal > Rendering
+  'settings.terminal.section.rendering': 'Rendering',
+  'settings.terminal.rendering.renderer': 'Renderer',
+  '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 > Shortcuts
   'settings.shortcuts.section.scheme': 'Hotkey Scheme',
@@ -372,9 +426,14 @@ const en: Messages = {
   'pf.deleteActive.title': 'Delete Active Port Forwarding?',
   'pf.deleteActive.desc': 'This port forwarding rule "{label}" is currently active. Deleting it will stop the tunnel first.',
   'pf.deleteActive.confirm': 'Stop and Delete',
+  'pf.form.autoStart': 'Auto Start',
+  'pf.form.autoStartDesc': 'Automatically start this rule when the app launches',
 
   // SFTP
   'sftp.newFolder': 'New Folder',
+  'sftp.newFile': 'New File',
+  'sftp.filter': 'Filter',
+  'sftp.filter.placeholder': 'Filter by filename...',
   'sftp.columns.name': 'Name',
   'sftp.columns.modified': 'Modified',
   'sftp.columns.size': 'Size',
@@ -404,14 +463,21 @@ const en: Messages = {
   'sftp.status.uploading': 'Uploading...',
   'sftp.status.ready': 'Ready',
   'sftp.goUp': 'Go up',
+  'sftp.encoding.label': 'Filename Encoding',
+  'sftp.encoding.auto': 'Auto',
+  'sftp.encoding.utf8': 'UTF-8',
+  'sftp.encoding.gb18030': 'GB18030',
   'sftp.goHome': 'Go to home',
   'sftp.folderName': 'Folder name',
   'sftp.folderName.placeholder': 'Enter folder name',
+  'sftp.fileName': 'File name',
+  'sftp.fileName.placeholder': 'Enter file name',
   'sftp.prompt.newFolderName': 'New folder name?',
   'sftp.rename.title': 'Rename',
   'sftp.rename.newName': 'New name',
   'sftp.rename.placeholder': 'Enter new name',
   'sftp.confirm.deleteOne': 'Delete "{name}"?',
+  '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.error.loadFailed': 'Failed to load directory',
@@ -419,6 +485,13 @@ const en: Messages = {
   'sftp.error.uploadFailed': 'Upload failed',
   'sftp.error.deleteFailed': 'Delete failed',
   'sftp.error.createFolderFailed': 'Failed to create folder',
+  'sftp.error.createFileFailed': 'Failed to create file',
+  'sftp.error.invalidFileName': 'Filename contains invalid characters: {chars}',
+  'sftp.error.reservedName': 'This filename is reserved by the system',
+  'sftp.overwrite.title': 'File Already Exists',
+  'sftp.overwrite.desc': 'A file named "{name}" already exists. Do you want to replace it?',
+  'sftp.overwrite.confirm': 'Replace',
+  'sftp.error.renameFailed': 'Failed to rename',
   'sftp.picker.title': 'Select Host',
   'sftp.picker.desc': 'Pick a host for the {side} pane',
   'sftp.picker.searchPlaceholder': 'Search hosts...',
@@ -432,11 +505,16 @@ const en: Messages = {
   'sftp.permissions.others': 'Others',
   'sftp.permissions.octal': 'Octal',
   'sftp.permissions.symbolic': 'Symbolic',
+  'sftp.permissions.success': 'Permissions updated successfully',
+  'sftp.permissions.failed': 'Failed to update permissions',
   'sftp.pane.local': 'Local',
   'sftp.pane.remote': 'Remote',
   'sftp.pane.selectHost': 'Select host',
   'sftp.pane.selectHostToStart': 'Select a host to start',
   'sftp.pane.chooseFilesystem': 'Choose a local or remote filesystem to browse',
+  'sftp.tabs.addTab': 'Add new tab',
+  'sftp.tabs.closeTab': 'Close tab',
+  'sftp.tabs.newTab': 'New Tab',
   'sftp.conflict.title': 'File Conflict',
   'sftp.conflict.desc': 'A file with the same name already exists at the destination',
   'sftp.conflict.alreadyExistsSuffix': 'already exists',
@@ -449,6 +527,89 @@ const en: Messages = {
   'sftp.conflict.action.keepBoth': 'Keep Both',
   'sftp.conflict.action.replace': 'Replace',
 
+  // SFTP File Opener
+  'sftp.context.openWith': 'Open with...',
+  'sftp.context.edit': 'Edit',
+  'sftp.context.preview': 'Preview',
+  'sftp.opener.title': 'Open with',
+  'sftp.opener.desc': 'Choose an application to open this file',
+  'sftp.opener.builtInEditor': 'Built-in Editor',
+  'sftp.opener.editDescription': 'Edit text files',
+  'sftp.opener.builtInImageViewer': 'Built-in Image Viewer',
+  'sftp.opener.previewDescription': 'Preview images',
+  'sftp.opener.systemApp': 'Choose Application...',
+  'sftp.opener.systemAppDescription': 'Select an application from your computer',
+  'sftp.opener.onlySystemApp': 'This file can only be opened with an external application',
+  'sftp.opener.noAppsAvailable': 'No applications available',
+  'sftp.opener.noExtension': 'files without extension',
+  'sftp.opener.setDefault': 'Always use this for {ext} files',
+  'sftp.opener.confirmTitle': 'Set as Default?',
+  'sftp.opener.confirmDescription': 'Do you want to always use {app} for {ext} files?',
+  'sftp.opener.yesRemember': 'Yes, remember this choice',
+  'sftp.opener.justOnce': 'Just this once',
+  'sftp.opener.confirm.title': 'Set Default Application',
+  'sftp.opener.confirm.desc': 'Do you want to always open .{ext} files with this application?',
+  'sftp.editor.title': 'Text Editor',
+  'sftp.editor.save': 'Save to Remote',
+  'sftp.editor.saving': 'Saving...',
+  'sftp.editor.saved': 'Saved successfully',
+  'sftp.editor.saveFailed': 'Failed to save file',
+  'sftp.editor.unsavedChanges': 'You have unsaved changes. Close anyway?',
+  'sftp.editor.syntaxHighlight': 'Syntax Highlighting',
+  'sftp.preview.title': 'Image Preview',
+  'sftp.preview.zoomIn': 'Zoom In',
+  'sftp.preview.zoomOut': 'Zoom Out',
+  'sftp.preview.resetZoom': 'Reset Zoom',
+  'sftp.preview.fitToWindow': 'Fit to Window',
+
+  // Settings > SFTP File Associations
+  'settings.tab.sftpFileAssociations': 'SFTP',
+  'settings.sftpFileAssociations.title': 'SFTP File Associations',
+  'settings.sftpFileAssociations.desc': 'Configure default applications for opening files by extension',
+  'settings.sftpFileAssociations.extension': 'Extension',
+  'settings.sftpFileAssociations.application': 'Application',
+  'settings.sftpFileAssociations.noAssociations': 'No file associations configured',
+  'settings.sftpFileAssociations.remove': 'Remove',
+  'settings.sftpFileAssociations.removeConfirm': 'Remove association for .{ext}?',
+
+  // Settings > SFTP Behavior
+  'settings.sftp.doubleClickBehavior': 'Double-click behavior',
+  'settings.sftp.doubleClickBehavior.desc': 'Choose the action when double-clicking a file in SFTP View',
+  'settings.sftp.doubleClickBehavior.open': 'Open file',
+  'settings.sftp.doubleClickBehavior.transfer': 'Transfer to other pane',
+  'settings.sftp.doubleClickBehavior.openDesc': 'Open the file in the default application',
+  'settings.sftp.doubleClickBehavior.transferDesc': 'Transfer the file to the other pane\'s active host',
+
+  // Settings > SFTP Auto Sync
+  'settings.sftp.autoSync': 'Auto-sync to remote',
+  'settings.sftp.autoSync.desc': 'Automatically sync file changes back to the remote server when opening files with external applications',
+  'settings.sftp.autoSync.enable': 'Enable auto-sync',
+  'settings.sftp.autoSync.enableDesc': 'When you save a file in an external application, changes will be automatically uploaded to the remote server',
+  'sftp.autoSync.success': 'File synced to remote: {fileName}',
+  'sftp.autoSync.error': 'Failed to sync file: {error}',
+
+  // SFTP Folder Upload Progress
+  'sftp.upload.progress': 'Uploading {current} of {total} files...',
+  'sftp.upload.uploading': 'Uploading...',
+  'sftp.upload.currentFile': 'Current: {fileName}',
+  'sftp.upload.cancelled': 'Upload cancelled',
+  'sftp.upload.cancel': 'Cancel',
+
+  // SFTP Reconnecting
+  'sftp.reconnecting.title': 'Reconnecting...',
+  'sftp.reconnecting.desc': 'Connection lost, attempting to reconnect',
+  'sftp.reconnected': 'Connection restored',
+  'sftp.error.reconnectFailed': 'Failed to reconnect. Please try again.',
+  'sftp.error.connectionLostManual': 'Connection lost. Please reconnect manually.',
+  'sftp.error.connectionLostReconnecting': 'Connection lost. Reconnecting...',
+  'sftp.error.sessionLost': 'SFTP session lost. Please reconnect.',
+
+  // Settings > SFTP Show Hidden Files
+  'settings.sftp.showHiddenFiles': 'Show hidden files',
+  'settings.sftp.showHiddenFiles.desc': 'Display files with the Windows hidden attribute in the SFTP file browser when browsing local Windows filesystem.',
+  'settings.sftp.showHiddenFiles.enable': 'Show hidden files',
+  'settings.sftp.showHiddenFiles.enableDesc': 'Display Windows hidden files when browsing local filesystem',
+
   // Quick Switcher
   'qs.search.placeholder': 'Search hosts or tabs',
   'qs.recentConnections': 'Recent connections',
@@ -487,6 +648,12 @@ const en: Messages = {
   'hostDetails.section.address': 'Address',
   'hostDetails.hostname.placeholder': 'IP or Hostname',
   'hostDetails.section.general': 'General',
+  'hostDetails.section.sftp': 'SFTP Settings',
+  'hostDetails.sftp.sudo': 'Sudo Mode',
+  'hostDetails.sftp.sudo.desc': 'Automatically acquire Root privileges using stored password',
+  'hostDetails.sftp.sudo.passwordWarning': 'Sudo mode requires a password. Configure one above, or ensure the server allows passwordless sudo.',
+  'hostDetails.sftp.encoding': 'Filename Encoding',
+  'hostDetails.sftp.encoding.desc': 'Select the encoding used to decode and send SFTP filenames.',
   'hostDetails.label.placeholder': 'Label (e.g., Production Server)',
   'hostDetails.group.placeholder': 'Parent Group',
   'hostDetails.section.credentials': 'Credentials',
@@ -495,6 +662,7 @@ const en: Messages = {
   'hostDetails.section.mosh': 'Mosh',
   'hostDetails.username.placeholder': 'Username',
   'hostDetails.password.placeholder': 'Password',
+  'hostDetails.password.save': 'Save password',
   'hostDetails.identity.suggestions': 'Identities',
   'hostDetails.identity.missing': 'Identity not found',
   'hostDetails.credential.keyCertificate': 'Key, Certificate',
@@ -505,16 +673,20 @@ const en: Messages = {
   'hostDetails.keys.empty': 'No keys available',
   'hostDetails.certs.search': 'Search certificates...',
   'hostDetails.certs.empty': 'No certificates available',
-  'hostDetails.agentForwarding': 'Agent Forwarding',
-  'hostDetails.jumpHosts': 'Jump Hosts',
+  'hostDetails.agentForwarding': 'Forward SSH Agent',
+  'hostDetails.agentForwarding.desc': 'Allow remote server to use your local SSH keys (e.g., for git operations)',
+  'hostDetails.agentForwarding.agentNotRunning': 'SSH Agent is not running',
+  'hostDetails.agentForwarding.agentNotRunningHint': 'Enable OpenSSH Authentication Agent service in Windows Services (services.msc) for agent forwarding to work.',
+  'hostDetails.section.agentForwarding': 'SSH Agent',
+  'hostDetails.jumpHosts': 'Proxy via Hosts',
   'hostDetails.jumpHosts.hops': '{count} hop(s)',
   'hostDetails.jumpHosts.direct': 'Direct',
-  'hostDetails.jumpHosts.configure': 'Configure Jump Hosts',
-  'hostDetails.proxy': 'Proxy',
+  'hostDetails.jumpHosts.configure': 'Configure Proxy Hosts',
+  'hostDetails.proxy': 'Proxy via HTTP/SOCKS5',
   'hostDetails.proxy.none': 'None',
   'hostDetails.proxy.edit': 'Edit Proxy',
   'hostDetails.proxy.configure': 'Configure Proxy',
-  'hostDetails.proxyPanel.title': 'Proxy',
+  'hostDetails.proxyPanel.title': 'Proxy via HTTP/SOCKS5',
   'hostDetails.proxyPanel.hostPlaceholder': 'Proxy host',
   'hostDetails.proxyPanel.credentials': 'Credentials',
   'hostDetails.proxyPanel.usernamePlaceholder': 'Username',
@@ -555,6 +727,12 @@ const en: Messages = {
   'hostDetails.telnet.password': 'Telnet Password',
   'hostDetails.charset.placeholder': 'Charset (e.g. UTF-8)',
   'hostDetails.telnet.add': 'Add Telnet Protocol',
+  'hostDetails.tags': 'Tags',
+  'hostDetails.group': 'Group',
+  'hostDetails.selectGroup': 'Select Group',
+  'hostDetails.addTag': 'Add a tag...',
+  'hostDetails.createTag': 'Create tag',
+  'hostDetails.createGroup': 'Create group',
 
   // Host form (legacy modal)
   'hostForm.title.edit': 'Edit Host',
@@ -589,7 +767,7 @@ const en: Messages = {
   'logs.empty.title': 'No Connection Logs',
   'logs.empty.desc':
     'Your connection history will appear here when you connect to hosts or open local terminals.',
-  'logs.showing': 'Showing {limit} of {total} logs.',
+  'logs.loadMore': 'Load {count} more logs',
   'logs.ongoing': 'ongoing',
   'logs.localTerminal': 'Local Terminal',
   'logs.action.save': 'Save',
@@ -600,6 +778,7 @@ const en: Messages = {
   'logView.customizeAppearance': 'Customize appearance',
   'logView.appearance': 'Appearance',
   'logView.readOnly': 'Read-only',
+  'logView.export': 'Export',
 
   // Terminal toolbar / search / context menu / auth
   'terminal.toolbar.openSftp': 'Open SFTP',
@@ -617,6 +796,20 @@ const en: Messages = {
   'terminal.toolbar.focus': 'Focus',
   'terminal.toolbar.focusMode': 'Focus Mode',
   'terminal.toolbar.closeSession': 'Close session',
+  'terminal.serverStats.cpu': 'CPU Usage',
+  'terminal.serverStats.cpuCores': 'CPU Core Usage',
+  'terminal.serverStats.memory': 'Memory Usage',
+  'terminal.serverStats.memoryDetails': 'Memory Details',
+  'terminal.serverStats.memUsed': 'Used',
+  'terminal.serverStats.memBuffers': 'Buffers',
+  'terminal.serverStats.memCached': 'Cache',
+  'terminal.serverStats.memFree': 'Free',
+  'terminal.serverStats.topProcesses': 'Top Processes by Memory',
+  'terminal.serverStats.disk': 'Disk Usage (Root)',
+  'terminal.serverStats.diskDetails': 'Mounted Disks',
+  'terminal.serverStats.network': 'Network Speed',
+  'terminal.serverStats.networkDetails': 'Network Interfaces',
+  'terminal.serverStats.noData': 'No data available',
   'terminal.search.placeholder': 'Search...',
   'terminal.search.noResults': 'No results',
   'terminal.search.prevMatch': 'Previous match (Shift+Enter)',
@@ -968,11 +1161,12 @@ const en: Messages = {
   'serial.field.baudRate': 'Baud Rate',
   'serial.field.dataBits': 'Data Bits',
   'serial.field.stopBits': 'Stop Bits',
+  'serial.field.stopBits15Warning': '1.5 stop bits may not be supported on all Windows devices',
   'serial.field.parity': 'Parity',
   'serial.field.flowControl': 'Flow Control',
   'serial.noPorts': 'No serial ports detected. Connect a device and refresh.',
   'serial.field.customPort': 'Custom Port Path',
-  'serial.field.customPortPlaceholder': 'e.g. /dev/ttys001',
+  'serial.field.customPortPlaceholder': 'e.g. /dev/ttys001 or COM1',
   'serial.type.hardware': 'Hardware',
   'serial.type.pseudo': 'Pseudo Terminal',
   'serial.type.custom': 'Custom',
@@ -989,6 +1183,29 @@ const en: Messages = {
   'serial.field.lineMode': 'Line Mode',
   'serial.field.lineModeDesc': 'Buffer input and send on Enter (instead of character-by-character)',
   'serial.connectionError': 'Failed to connect to serial port',
+  'serial.field.baudRatePlaceholder': 'Select or enter baud rate...',
+  'serial.field.baudRateEmpty': 'Enter a custom baud rate',
+  'serial.field.customBaudRate': 'Using custom baud rate',
+  'serial.field.saveConfig': 'Save Configuration',
+  'serial.field.saveConfigDesc': 'Save this serial configuration to hosts for quick access',
+  'serial.field.configLabel': 'Configuration Name',
+  'serial.field.configLabelPlaceholder': 'e.g. Arduino Uno',
+  'serial.connectAndSave': 'Connect & Save',
+  'serial.edit.title': 'Serial Port Settings',
+
+  // Keyboard Interactive Authentication (2FA/MFA)
+  'keyboard.interactive.title': 'Authentication Required',
+  'keyboard.interactive.desc': 'The server requires additional authentication.',
+  'keyboard.interactive.descWithHost': 'The server {hostname} requires additional authentication.',
+  'keyboard.interactive.response': 'Response',
+  'keyboard.interactive.enterCode': 'Enter verification code',
+  'keyboard.interactive.enterResponse': 'Enter response',
+  'keyboard.interactive.submit': 'Submit',
+  'keyboard.interactive.verifying': 'Verifying...',
+  'keyboard.interactive.fill': 'Fill',
+  'keyboard.interactive.fillSaved': 'Fill with saved password',
+  'keyboard.interactive.useSaved': 'Use saved',
+  'keyboard.interactive.useSavedPassword': 'Use saved password',
 };
 
 export default en;

application/i18n/locales/zh-CN.ts

@@ -49,6 +49,39 @@ const zhCN: Messages = {
   'settings.tab.terminal': '终端',
   'settings.tab.shortcuts': '快捷键',
   'settings.tab.syncCloud': '同步与云',
+  'settings.tab.system': '系统',
+
+  // Settings > System
+  'settings.system.title': '系统',
+  'settings.system.description': '系统信息与临时文件管理。',
+  'settings.system.tempDirectory': '临时文件',
+  'settings.system.location': '位置',
+  'settings.system.fileCount': '文件数量',
+  'settings.system.totalSize': '占用空间',
+  'settings.system.openFolder': '打开文件夹',
+  'settings.system.refresh': '刷新',
+  'settings.system.clearTempFiles': '清理临时文件',
+  'settings.system.clearing': '清理中...',
+  'settings.system.clearResult': '已删除 {deleted} 个文件，{failed} 个失败。',
+  'settings.system.tempDirectoryHint': '临时文件在使用外部应用打开远程文件时创建。SFTP 会话关闭时会自动清理。',
+
+  // Settings > Session Logs
+  'settings.sessionLogs.title': '会话日志',
+  'settings.sessionLogs.description': '配置会话日志导出和自动保存设置。',
+  'settings.sessionLogs.autoSave': '自动保存',
+  'settings.sessionLogs.enableAutoSave': '启用自动保存',
+  'settings.sessionLogs.enableAutoSaveDesc': '在终端会话结束时自动保存会话日志。',
+  'settings.sessionLogs.directory': '保存目录',
+  'settings.sessionLogs.noDirectory': '未选择目录',
+  'settings.sessionLogs.browse': '浏览',
+  'settings.sessionLogs.openFolder': '打开文件夹',
+  'settings.sessionLogs.directoryHint': '日志将按主机名组织在子目录中。',
+  'settings.sessionLogs.format': '日志格式',
+  'settings.sessionLogs.formatDesc': '选择保存日志文件的格式。',
+  'settings.sessionLogs.formatTxt': '纯文本 (.txt)',
+  'settings.sessionLogs.formatRaw': '原始格式 (.log)',
+  'settings.sessionLogs.formatHtml': 'HTML (.html)',
+  'settings.sessionLogs.hint': '会话日志用于记录终端输出，便于故障排查和审计。',
 
   // Settings > Application
   'settings.application.checkUpdates': '检查更新',
@@ -91,6 +124,8 @@ const zhCN: Messages = {
     '/* 示例：*/\n.terminal { background: #1a1a2e !important; }\n:root { --radius: 0.25rem; }',
   'settings.appearance.language': '语言',
   'settings.appearance.language.desc': '选择界面语言',
+  'settings.appearance.uiFont': '界面字体',
+  'settings.appearance.uiFont.desc': '选择软件界面使用的字体',
 
   // Context menus / common actions
   'action.newHost': '新建主机',
@@ -249,6 +284,9 @@ const zhCN: Messages = {
 
   // SFTP
   'sftp.newFolder': '新建文件夹',
+  'sftp.newFile': '新建文件',
+  'sftp.filter': '筛选',
+  'sftp.filter.placeholder': '按文件名筛选...',
   'sftp.columns.name': '名称',
   'sftp.columns.modified': '修改时间',
   'sftp.columns.size': '大小',
@@ -278,14 +316,21 @@ const zhCN: Messages = {
   'sftp.status.uploading': '上传中...',
   'sftp.status.ready': '就绪',
   'sftp.goUp': '上一级',
+  'sftp.encoding.label': '文件名编码',
+  'sftp.encoding.auto': '自动',
+  'sftp.encoding.utf8': 'UTF-8',
+  'sftp.encoding.gb18030': 'GB18030',
   'sftp.goHome': '返回主目录',
   'sftp.folderName': '文件夹名称',
   'sftp.folderName.placeholder': '输入文件夹名称',
+  'sftp.fileName': '文件名称',
+  'sftp.fileName.placeholder': '输入文件名称',
   'sftp.prompt.newFolderName': '新建文件夹名称？',
   'sftp.rename.title': '重命名',
   'sftp.rename.newName': '新名称',
   'sftp.rename.placeholder': '输入新名称',
   'sftp.confirm.deleteOne': '删除 "{name}"？',
+  'sftp.deleteConfirm.single': '删除 "{name}"？',
   'sftp.deleteConfirm.title': '删除 {count} 个项目？',
   'sftp.deleteConfirm.desc': '此操作不可撤销，将删除以下内容：',
   'sftp.error.loadFailed': '加载目录失败',
@@ -293,6 +338,13 @@ const zhCN: Messages = {
   'sftp.error.uploadFailed': '上传失败',
   'sftp.error.deleteFailed': '删除失败',
   'sftp.error.createFolderFailed': '创建文件夹失败',
+  'sftp.error.createFileFailed': '创建文件失败',
+  'sftp.error.invalidFileName': '文件名包含非法字符：{chars}',
+  'sftp.error.reservedName': '此文件名是系统保留名称',
+  'sftp.overwrite.title': '文件已存在',
+  'sftp.overwrite.desc': '名为"{name}"的文件已存在。是否要替换它？',
+  'sftp.overwrite.confirm': '替换',
+  'sftp.error.renameFailed': '重命名失败',
   'sftp.picker.title': '选择主机',
   'sftp.picker.desc': '为{side}窗格选择主机',
   'sftp.picker.searchPlaceholder': '搜索主机...',
@@ -301,11 +353,13 @@ const zhCN: Messages = {
   'sftp.picker.local.badge': '本地',
   'sftp.picker.noMatch': '没有匹配的主机',
   'sftp.permissions.title': '编辑权限',
-  'sftp.permissions.owner': 'Owner',
-  'sftp.permissions.group': 'Group',
-  'sftp.permissions.others': 'Others',
-  'sftp.permissions.octal': 'Octal',
-  'sftp.permissions.symbolic': 'Symbolic',
+  'sftp.permissions.owner': '所有者',
+  'sftp.permissions.group': '群组',
+  'sftp.permissions.others': '其他',
+  'sftp.permissions.octal': '八进制',
+  'sftp.permissions.symbolic': '符号',
+  'sftp.permissions.success': '权限已更新',
+  'sftp.permissions.failed': '权限更新失败',
 
   // Quick Switcher
   'qs.search.placeholder': '搜索主机或标签页',
@@ -341,6 +395,12 @@ const zhCN: Messages = {
   'hostDetails.section.address': '地址',
   'hostDetails.hostname.placeholder': 'IP 或 主机名',
   'hostDetails.section.general': '通用',
+  'hostDetails.section.sftp': 'SFTP 设置',
+  'hostDetails.sftp.sudo': 'Sudo 提权模式',
+  'hostDetails.sftp.sudo.desc': '使用保存的密码自动获取 Root 权限',
+  'hostDetails.sftp.sudo.passwordWarning': 'Sudo 模式需要密码。请在上方配置密码，或确保服务器允许免密 sudo。',
+  'hostDetails.sftp.encoding': '文件名编码',
+  'hostDetails.sftp.encoding.desc': '选择用于解码和发送 SFTP 文件名的编码。',
   'hostDetails.label.placeholder': '名称（例如：Production Server）',
   'hostDetails.group.placeholder': '父级 Group',
   'hostDetails.section.credentials': '凭据',
@@ -349,6 +409,7 @@ const zhCN: Messages = {
   'hostDetails.section.mosh': 'Mosh',
   'hostDetails.username.placeholder': '用户名',
   'hostDetails.password.placeholder': '密码',
+  'hostDetails.password.save': '保存密码',
   'hostDetails.identity.suggestions': '身份',
   'hostDetails.identity.missing': '身份不存在',
   'hostDetails.credential.keyCertificate': '密钥 / 证书',
@@ -359,12 +420,16 @@ const zhCN: Messages = {
   'hostDetails.keys.empty': '暂无密钥',
   'hostDetails.certs.search': '搜索证书…',
   'hostDetails.certs.empty': '暂无证书',
-  'hostDetails.agentForwarding': '代理转发',
-  'hostDetails.jumpHosts': '跳板主机',
+  'hostDetails.agentForwarding': '转发 SSH 密钥',
+  'hostDetails.agentForwarding.desc': '允许远程服务器使用本地 SSH 密钥（例如用于 git 操作）',
+  'hostDetails.agentForwarding.agentNotRunning': 'SSH Agent 未运行',
+  'hostDetails.agentForwarding.agentNotRunningHint': '请在 Windows 服务管理器 (services.msc) 中启用 OpenSSH Authentication Agent 服务。',
+  'hostDetails.section.agentForwarding': 'SSH 代理',
+  'hostDetails.jumpHosts': '通过主机代理',
   'hostDetails.jumpHosts.hops': '{count} 跳',
   'hostDetails.jumpHosts.direct': '直连',
-  'hostDetails.jumpHosts.configure': '配置跳板主机',
-  'hostDetails.proxy': '代理',
+  'hostDetails.jumpHosts.configure': '配置代理主机',
+  'hostDetails.proxy': '通过 HTTP/SOCKS5 代理',
   'hostDetails.proxy.none': '无',
   'hostDetails.proxy.edit': '编辑代理',
   'hostDetails.proxy.configure': '配置代理',
@@ -381,6 +446,12 @@ const zhCN: Messages = {
   'hostDetails.telnet.password': 'Telnet 密码',
   'hostDetails.charset.placeholder': '字符集（例如 UTF-8）',
   'hostDetails.telnet.add': '添加 Telnet 协议',
+  'hostDetails.tags': '标签',
+  'hostDetails.group': '分组',
+  'hostDetails.selectGroup': '选择分组',
+  'hostDetails.addTag': '添加标签...',
+  'hostDetails.createTag': '创建标签',
+  'hostDetails.createGroup': '创建分组',
 
   // Host form (legacy modal)
   'hostForm.title.edit': '编辑主机',
@@ -414,7 +485,7 @@ const zhCN: Messages = {
   'logs.table.saved': '收藏',
   'logs.empty.title': '暂无连接日志',
   'logs.empty.desc': '当你连接主机或打开本地终端后，这里会显示连接历史。',
-  'logs.showing': '显示 {limit}/{total} 条日志。',
+  'logs.loadMore': '加载更多 ({count} 条)',
   'logs.ongoing': '进行中',
   'logs.localTerminal': '本地终端',
   'logs.action.save': '收藏',
@@ -425,6 +496,7 @@ const zhCN: Messages = {
   'logView.customizeAppearance': '自定义外观',
   'logView.appearance': '外观',
   'logView.readOnly': '只读',
+  'logView.export': '导出',
 
   // Terminal toolbar / search / context menu / auth
   'terminal.toolbar.openSftp': '打开 SFTP',
@@ -442,6 +514,20 @@ const zhCN: Messages = {
   'terminal.toolbar.focus': '聚焦',
   'terminal.toolbar.focusMode': '聚焦模式',
   'terminal.toolbar.closeSession': '关闭会话',
+  'terminal.serverStats.cpu': 'CPU 使用率',
+  'terminal.serverStats.cpuCores': 'CPU 核心使用率',
+  'terminal.serverStats.memory': '内存使用',
+  'terminal.serverStats.memoryDetails': '内存详情',
+  'terminal.serverStats.memUsed': '已用',
+  'terminal.serverStats.memBuffers': '缓冲区',
+  'terminal.serverStats.memCached': '缓存',
+  'terminal.serverStats.memFree': '空闲',
+  'terminal.serverStats.topProcesses': '内存占用前十进程',
+  'terminal.serverStats.disk': '磁盘使用（根分区）',
+  'terminal.serverStats.diskDetails': '已挂载磁盘',
+  'terminal.serverStats.network': '网络速度',
+  'terminal.serverStats.networkDetails': '网络接口',
+  'terminal.serverStats.noData': '暂无数据',
   'terminal.search.placeholder': '搜索…',
   'terminal.search.noResults': '无结果',
   'terminal.search.prevMatch': '上一个匹配 (Shift+Enter)',
@@ -669,6 +755,8 @@ const zhCN: Messages = {
   'pf.deleteActive.title': '删除正在运行的端口转发？',
   'pf.deleteActive.desc': '端口转发规则 "{label}" 当前正在运行。删除前将先关闭转发连接。',
   'pf.deleteActive.confirm': '关闭并删除',
+  'pf.form.autoStart': '自动启动',
+  'pf.form.autoStartDesc': '应用启动时自动开启此规则',
 
   // SFTP (pane + conflict)
   'sftp.pane.local': '本地',
@@ -676,6 +764,9 @@ const zhCN: Messages = {
   'sftp.pane.selectHost': '选择主机',
   'sftp.pane.selectHostToStart': '先选择一个主机',
   'sftp.pane.chooseFilesystem': '选择要浏览的本地或远端文件系统',
+  'sftp.tabs.addTab': '新建标签页',
+  'sftp.tabs.closeTab': '关闭标签页',
+  'sftp.tabs.newTab': '新标签页',
   'sftp.conflict.title': '文件冲突',
   'sftp.conflict.desc': '目标位置已存在同名文件',
   'sftp.conflict.alreadyExistsSuffix': '已存在',
@@ -688,8 +779,95 @@ const zhCN: Messages = {
   'sftp.conflict.action.keepBoth': '保留两者',
   'sftp.conflict.action.replace': '替换',
 
+  // SFTP File Opener
+  'sftp.context.openWith': '打开方式...',
+  'sftp.context.edit': '编辑',
+  'sftp.context.preview': '预览',
+  'sftp.opener.title': '打开方式',
+  'sftp.opener.desc': '选择一个应用程序来打开此文件',
+  'sftp.opener.builtInEditor': '内置编辑器',
+  'sftp.opener.editDescription': '编辑文本文件',
+  'sftp.opener.builtInImageViewer': '内置图片预览',
+  'sftp.opener.previewDescription': '预览图片',
+  'sftp.opener.systemApp': '选择应用程序...',
+  'sftp.opener.systemAppDescription': '从本地选择一个应用程序',
+  'sftp.opener.onlySystemApp': '此文件只能用外部应用程序打开',
+  'sftp.opener.noAppsAvailable': '无可用应用程序',
+  'sftp.opener.noExtension': '无扩展名文件',
+  'sftp.opener.setDefault': '始终使用此方式打开 {ext} 文件',
+  'sftp.opener.confirmTitle': '设为默认？',
+  'sftp.opener.confirmDescription': '是否始终使用 {app} 打开 {ext} 文件？',
+  'sftp.opener.yesRemember': '是，记住此选择',
+  'sftp.opener.justOnce': '仅此一次',
+  'sftp.opener.confirm.title': '设置默认应用程序',
+  'sftp.opener.confirm.desc': '是否始终使用此应用程序打开 .{ext} 文件？',
+  'sftp.editor.title': '文本编辑器',
+  'sftp.editor.save': '保存到远程',
+  'sftp.editor.saving': '保存中...',
+  'sftp.editor.saved': '保存成功',
+  'sftp.editor.saveFailed': '保存文件失败',
+  'sftp.editor.unsavedChanges': '您有未保存的更改。确定要关闭吗？',
+  'sftp.editor.syntaxHighlight': '语法高亮',
+  'sftp.preview.title': '图片预览',
+  'sftp.preview.zoomIn': '放大',
+  'sftp.preview.zoomOut': '缩小',
+  'sftp.preview.resetZoom': '重置缩放',
+  'sftp.preview.fitToWindow': '适应窗口',
+
+  // Settings > SFTP File Associations
+  'settings.tab.sftpFileAssociations': 'SFTP',
+  'settings.sftpFileAssociations.title': 'SFTP 文件关联',
+  'settings.sftpFileAssociations.desc': '配置按扩展名打开文件的默认应用程序',
+  'settings.sftpFileAssociations.extension': '扩展名',
+  'settings.sftpFileAssociations.application': '应用程序',
+  'settings.sftpFileAssociations.noAssociations': '未配置文件关联',
+  'settings.sftpFileAssociations.remove': '移除',
+  'settings.sftpFileAssociations.removeConfirm': '确定移除 .{ext} 的关联吗？',
+
+  // Settings > SFTP Behavior
+  'settings.sftp.doubleClickBehavior': '双击行为',
+  'settings.sftp.doubleClickBehavior.desc': '选择在 SFTP 视图中双击文件时的操作',
+  'settings.sftp.doubleClickBehavior.open': '打开文件',
+  'settings.sftp.doubleClickBehavior.transfer': '传输到另一侧',
+  'settings.sftp.doubleClickBehavior.openDesc': '使用默认应用程序打开文件',
+  'settings.sftp.doubleClickBehavior.transferDesc': '将文件传输到另一窗格的活动主机',
+
+  // Settings > SFTP Auto Sync
+  'settings.sftp.autoSync': '自动同步到远程',
+  'settings.sftp.autoSync.desc': '使用外部应用程序打开文件时，自动将文件更改同步回远程服务器',
+  'settings.sftp.autoSync.enable': '启用自动同步',
+  'settings.sftp.autoSync.enableDesc': '在外部应用程序中保存文件时，更改将自动上传到远程服务器',
+  'sftp.autoSync.success': '文件已同步到远程：{fileName}',
+  'sftp.autoSync.error': '同步文件失败：{error}',
+
+  // SFTP Folder Upload Progress
+  'sftp.upload.progress': '正在上传 {current}/{total} 个文件...',
+  'sftp.upload.uploading': '正在上传...',
+  'sftp.upload.currentFile': '当前: {fileName}',
+  'sftp.upload.cancelled': '上传已取消',
+  'sftp.upload.cancel': '取消',
+
+  // SFTP Reconnecting
+  'sftp.reconnecting.title': '正在重连...',
+  'sftp.reconnecting.desc': '连接已断开，正在尝试重新连接',
+  'sftp.reconnected': '连接已恢复',
+  'sftp.error.reconnectFailed': '重连失败，请重试。',
+  'sftp.error.connectionLostManual': '连接已断开，请手动重新连接。',
+  'sftp.error.connectionLostReconnecting': '连接已断开，正在重连...',
+  'sftp.error.sessionLost': 'SFTP 会话已断开，请重新连接。',
+
+  // Settings > SFTP Show Hidden Files
+  'settings.sftp.showHiddenFiles': '显示隐藏文件',
+  'settings.sftp.showHiddenFiles.desc': '在浏览本地 Windows 文件系统时，显示具有 Windows 隐藏属性的文件。',
+  'settings.sftp.showHiddenFiles.enable': '显示隐藏文件',
+  'settings.sftp.showHiddenFiles.enableDesc': '浏览本地文件系统时显示 Windows 隐藏文件',
+
   // Settings > Terminal
   'settings.terminal.section.theme': '终端主题',
+  'settings.terminal.themeModal.title': '选择主题',
+  'settings.terminal.themeModal.darkThemes': '深色主题',
+  'settings.terminal.themeModal.lightThemes': '浅色主题',
+  'settings.terminal.theme.selectButton': '选择主题',
   'settings.terminal.section.font': '字体',
   'settings.terminal.section.cursor': '光标',
   'settings.terminal.section.keyboard': '键盘',
@@ -756,6 +934,21 @@ const zhCN: Messages = {
   'settings.terminal.localShell.startDir.placeholder': '用户主目录',
   'settings.terminal.localShell.startDir.notFound': '目录不存在',
   'settings.terminal.localShell.startDir.isFile': '路径是文件，不是目录',
+  'settings.terminal.section.connection': '连接',
+  'settings.terminal.connection.keepaliveInterval': '会话保持间隔',
+  'settings.terminal.connection.keepaliveInterval.desc': '向服务器发送 SSH 级别保活数据包的频率（秒）。设为 0 表示禁用。',
+  'settings.terminal.section.serverStats': '服务器状态（Linux）',
+  'settings.terminal.serverStats.show': '显示服务器状态',
+  'settings.terminal.serverStats.show.desc': '在终端状态栏显示 CPU、内存和磁盘使用情况（仅限 Linux 服务器）。',
+  'settings.terminal.serverStats.refreshInterval': '刷新间隔',
+  'settings.terminal.serverStats.refreshInterval.desc': '服务器状态刷新的频率。',
+  'settings.terminal.serverStats.seconds': '秒',
+
+  // Settings > Terminal > Rendering
+  'settings.terminal.section.rendering': '渲染',
+  'settings.terminal.rendering.renderer': '渲染器',
+  'settings.terminal.rendering.renderer.desc': '选择终端渲染技术。自动模式会在低内存设备上使用 Canvas。更改将在新终端会话中生效。',
+  'settings.terminal.rendering.auto': '自动',
 
   // Settings > Shortcuts
   'settings.shortcuts.section.scheme': '快捷键方案',
@@ -957,11 +1150,12 @@ const zhCN: Messages = {
   'serial.field.baudRate': '波特率',
   'serial.field.dataBits': '数据位',
   'serial.field.stopBits': '停止位',
+  'serial.field.stopBits15Warning': '1.5 停止位在 Windows 下可能不被所有设备支持',
   'serial.field.parity': '校验位',
   'serial.field.flowControl': '流控制',
   'serial.noPorts': '未检测到串口设备。请连接设备后刷新。',
   'serial.field.customPort': '自定义串口路径',
-  'serial.field.customPortPlaceholder': '例如 /dev/ttys001',
+  'serial.field.customPortPlaceholder': '例如 /dev/ttys001 或 COM1',
   'serial.type.hardware': '硬件',
   'serial.type.pseudo': '虚拟终端',
   'serial.type.custom': '自定义',
@@ -978,6 +1172,29 @@ const zhCN: Messages = {
   'serial.field.lineMode': '行模式',
   'serial.field.lineModeDesc': '缓冲输入，按回车后发送（而不是逐字符发送）',
   'serial.connectionError': '连接串口失败',
+  'serial.field.baudRatePlaceholder': '选择或输入波特率...',
+  'serial.field.baudRateEmpty': '输入自定义波特率',
+  'serial.field.customBaudRate': '使用自定义波特率',
+  'serial.field.saveConfig': '保存配置',
+  'serial.field.saveConfigDesc': '将此串口配置保存到主机列表以便快速访问',
+  'serial.field.configLabel': '配置名称',
+  'serial.field.configLabelPlaceholder': '例如 Arduino Uno',
+  'serial.connectAndSave': '连接并保存',
+  'serial.edit.title': '串口设置',
+
+  // Keyboard Interactive Authentication (2FA/MFA)
+  'keyboard.interactive.title': '需要验证',
+  'keyboard.interactive.desc': '服务器需要额外的身份验证。',
+  'keyboard.interactive.descWithHost': '服务器 {hostname} 需要额外的身份验证。',
+  'keyboard.interactive.response': '响应',
+  'keyboard.interactive.enterCode': '输入验证码',
+  'keyboard.interactive.enterResponse': '输入响应',
+  'keyboard.interactive.submit': '提交',
+  'keyboard.interactive.verifying': '验证中...',
+  'keyboard.interactive.fill': '填入',
+  'keyboard.interactive.fillSaved': '填入已保存的密码',
+  'keyboard.interactive.useSaved': '使用已保存',
+  'keyboard.interactive.useSavedPassword': '使用已保存的密码',
 };
 
 export default zhCN;

application/state/fontStore.ts

@@ -0,0 +1,146 @@
+import { useSyncExternalStore } from 'react';
+import { TERMINAL_FONTS, type TerminalFont } from '../../infrastructure/config/fonts';
+import { getMonospaceFonts } from '../../lib/localFonts';
+
+/**
+ * Global font store - singleton pattern using useSyncExternalStore
+ * Ensures fonts are loaded only once and shared across all components
+ */
+type Listener = () => void;
+
+interface FontStoreState {
+  availableFonts: TerminalFont[];
+  isLoading: boolean;
+  isLoaded: boolean;
+  error: string | null;
+}
+
+class FontStore {
+  private state: FontStoreState = {
+    availableFonts: TERMINAL_FONTS,
+    isLoading: false,
+    isLoaded: false,
+    error: null,
+  };
+  private listeners = new Set<Listener>();
+
+  // Getters for individual state slices
+  getAvailableFonts = (): TerminalFont[] => this.state.availableFonts;
+  getIsLoading = (): boolean => this.state.isLoading;
+  getIsLoaded = (): boolean => this.state.isLoaded;
+  getError = (): string | null => this.state.error;
+
+  private notify = () => {
+    // Defer listener notification to avoid "setState during render"
+    Promise.resolve().then(() => {
+      this.listeners.forEach(listener => listener());
+    });
+  };
+
+  private setState = (partial: Partial<FontStoreState>) => {
+    this.state = { ...this.state, ...partial };
+    this.notify();
+  };
+
+  subscribe = (listener: Listener): (() => void) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+
+  /**
+   * Initialize font loading - safe to call multiple times,
+   * will only load once
+   */
+  initialize = async (): Promise<void> => {
+    // Already loaded or currently loading
+    if (this.state.isLoaded || this.state.isLoading) {
+      return;
+    }
+
+    this.setState({ isLoading: true, error: null });
+
+    try {
+      const localFonts = await getMonospaceFonts();
+      
+      // Combine default fonts with local fonts, deduplicate by id
+      const fontMap = new Map<string, TerminalFont>();
+
+      // Add default fonts first
+      TERMINAL_FONTS.forEach(font => fontMap.set(font.id, font));
+
+      // Add local fonts with a distinct ID namespace to avoid collisions
+      localFonts.forEach(font => {
+        const localId = font.id.startsWith('local-') ? font.id : `local-${font.id}`;
+        fontMap.set(localId, { ...font, id: localId });
+      });
+
+      this.setState({
+        availableFonts: Array.from(fontMap.values()),
+        isLoading: false,
+        isLoaded: true,
+      });
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to load local fonts';
+      console.warn('Failed to fetch local fonts, using defaults:', error);
+      this.setState({
+        availableFonts: TERMINAL_FONTS,
+        isLoading: false,
+        isLoaded: true,
+        error: errorMessage,
+      });
+    }
+  };
+
+  /**
+   * Find a font by ID with fallback
+   */
+  getFontById = (fontId: string): TerminalFont => {
+    const fonts = this.state.availableFonts;
+    return fonts.find(f => f.id === fontId) || fonts[0] || TERMINAL_FONTS[0];
+  };
+}
+
+// Singleton instance
+export const fontStore = new FontStore();
+
+// ============== Hooks ==============
+
+/**
+ * Get available fonts - triggers initialization on first use
+ */
+export const useAvailableFonts = (): TerminalFont[] => {
+  // Trigger initialization on first use
+  if (!fontStore.getIsLoaded() && !fontStore.getIsLoading()) {
+    fontStore.initialize();
+  }
+  
+  return useSyncExternalStore(
+    fontStore.subscribe,
+    fontStore.getAvailableFonts
+  );
+};
+
+/**
+ * Get font loading state
+ */
+export const useFontsLoading = (): boolean => {
+  return useSyncExternalStore(
+    fontStore.subscribe,
+    fontStore.getIsLoading
+  );
+};
+
+/**
+ * Get font by ID with fallback - useful for components that need a specific font
+ */
+export const useFontById = (fontId: string): TerminalFont => {
+  const fonts = useAvailableFonts();
+  return fonts.find(f => f.id === fontId) || fonts[0] || TERMINAL_FONTS[0];
+};
+
+/**
+ * Initialize fonts eagerly (call at app startup)
+ */
+export const initializeFonts = (): void => {
+  fontStore.initialize();
+};

application/state/sftp/errors.ts

@@ -0,0 +1,34 @@
+export const isSessionError = (err: unknown): boolean => {
+  if (!(err instanceof Error)) return false;
+  const msg = err.message.toLowerCase();
+  return (
+    msg.includes("session not found") ||
+    msg.includes("sftp session") ||
+    msg.includes("not found") ||
+    msg.includes("closed") ||
+    msg.includes("connection reset")
+  );
+};
+
+/**
+ * Check if an error message indicates a fatal error that should stop the entire upload.
+ * This includes session errors AND target directory deletion errors.
+ */
+export const isFatalUploadError = (errorMessage: string): boolean => {
+  const msg = errorMessage.toLowerCase();
+  return (
+    // Session-related errors
+    msg.includes("session not found") ||
+    msg.includes("sftp session") ||
+    msg.includes("connection") ||
+    msg.includes("disconnected") ||
+    // Target directory was deleted during upload
+    msg.includes("no such file") ||
+    msg.includes("enoent") ||
+    msg.includes("does not exist") ||
+    msg.includes("write stream error") ||
+    // Directory was removed
+    msg.includes("directory not found") ||
+    msg.includes("not a directory")
+  );
+};

application/state/sftp/mockLocalFiles.ts

@@ -0,0 +1,454 @@
+import { SftpFileEntry } from "../../../domain/models";
+import { formatDate } from "./utils";
+
+// Mock local file data for development (when backend is not available)
+export function buildMockLocalFiles(path: string): SftpFileEntry[] {
+  // Normalize path for matching (handle both Windows and Unix paths)
+  const normPath = path.replace(/\\/g, "/").replace(/\/$/, "") || "/";
+
+  const mockData: Record<string, SftpFileEntry[]> = {
+    // Unix-style paths
+    "/": [
+      {
+        name: "Users",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+      {
+        name: "Applications",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 172800000,
+        lastModifiedFormatted: formatDate(Date.now() - 172800000),
+      },
+      {
+        name: "System",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 259200000,
+        lastModifiedFormatted: formatDate(Date.now() - 259200000),
+      },
+    ],
+    "/Users": [
+      {
+        name: "damao",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 3600000,
+        lastModifiedFormatted: formatDate(Date.now() - 3600000),
+      },
+      {
+        name: "Shared",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+    ],
+    "/Users/damao": [
+      {
+        name: "Desktop",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 1800000,
+        lastModifiedFormatted: formatDate(Date.now() - 1800000),
+      },
+      {
+        name: "Documents",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 7200000,
+        lastModifiedFormatted: formatDate(Date.now() - 7200000),
+      },
+      {
+        name: "Downloads",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 3600000,
+        lastModifiedFormatted: formatDate(Date.now() - 3600000),
+      },
+      {
+        name: "Pictures",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 172800000,
+        lastModifiedFormatted: formatDate(Date.now() - 172800000),
+      },
+      {
+        name: "Projects",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 900000,
+        lastModifiedFormatted: formatDate(Date.now() - 900000),
+      },
+    ],
+    // Windows-style paths (normalized to forward slashes for matching)
+    "C:": [
+      {
+        name: "Users",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+      {
+        name: "Program Files",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 172800000,
+        lastModifiedFormatted: formatDate(Date.now() - 172800000),
+      },
+      {
+        name: "Windows",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 259200000,
+        lastModifiedFormatted: formatDate(Date.now() - 259200000),
+      },
+    ],
+    "C:/Users": [
+      {
+        name: "damao",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 3600000,
+        lastModifiedFormatted: formatDate(Date.now() - 3600000),
+      },
+      {
+        name: "Public",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+      {
+        name: "Default",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 172800000,
+        lastModifiedFormatted: formatDate(Date.now() - 172800000),
+      },
+    ],
+    "C:/Users/damao": [
+      {
+        name: "Desktop",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 1800000,
+        lastModifiedFormatted: formatDate(Date.now() - 1800000),
+      },
+      {
+        name: "Documents",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 7200000,
+        lastModifiedFormatted: formatDate(Date.now() - 7200000),
+      },
+      {
+        name: "Downloads",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 3600000,
+        lastModifiedFormatted: formatDate(Date.now() - 3600000),
+      },
+      {
+        name: "Pictures",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 172800000,
+        lastModifiedFormatted: formatDate(Date.now() - 172800000),
+      },
+      {
+        name: "Projects",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 900000,
+        lastModifiedFormatted: formatDate(Date.now() - 900000),
+      },
+    ],
+    "C:/Users/damao/Desktop": [
+      {
+        name: "Netcatty",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 300000,
+        lastModifiedFormatted: formatDate(Date.now() - 300000),
+      },
+      {
+        name: "notes.txt",
+        type: "file",
+        size: 2048,
+        sizeFormatted: "2 KB",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+      {
+        name: "screenshot.png",
+        type: "file",
+        size: 1048576,
+        sizeFormatted: "1 MB",
+        lastModified: Date.now() - 43200000,
+        lastModifiedFormatted: formatDate(Date.now() - 43200000),
+      },
+    ],
+    "C:/Users/damao/Desktop/Netcatty": [
+      {
+        name: "src",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 600000,
+        lastModifiedFormatted: formatDate(Date.now() - 600000),
+      },
+      {
+        name: "package.json",
+        type: "file",
+        size: 1536,
+        sizeFormatted: "1.5 KB",
+        lastModified: Date.now() - 3600000,
+        lastModifiedFormatted: formatDate(Date.now() - 3600000),
+      },
+      {
+        name: "README.md",
+        type: "file",
+        size: 4096,
+        sizeFormatted: "4 KB",
+        lastModified: Date.now() - 7200000,
+        lastModifiedFormatted: formatDate(Date.now() - 7200000),
+      },
+      {
+        name: "tsconfig.json",
+        type: "file",
+        size: 512,
+        sizeFormatted: "512 Bytes",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+    ],
+    "C:/Users/damao/Documents": [
+      {
+        name: "Work",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+      {
+        name: "Personal",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 172800000,
+        lastModifiedFormatted: formatDate(Date.now() - 172800000),
+      },
+      {
+        name: "report.pdf",
+        type: "file",
+        size: 2097152,
+        sizeFormatted: "2 MB",
+        lastModified: Date.now() - 259200000,
+        lastModifiedFormatted: formatDate(Date.now() - 259200000),
+      },
+    ],
+    "C:/Users/damao/Downloads": [
+      {
+        name: "installer.exe",
+        type: "file",
+        size: 52428800,
+        sizeFormatted: "50 MB",
+        lastModified: Date.now() - 3600000,
+        lastModifiedFormatted: formatDate(Date.now() - 3600000),
+      },
+      {
+        name: "archive.zip",
+        type: "file",
+        size: 10485760,
+        sizeFormatted: "10 MB",
+        lastModified: Date.now() - 7200000,
+        lastModifiedFormatted: formatDate(Date.now() - 7200000),
+      },
+      {
+        name: "document.pdf",
+        type: "file",
+        size: 524288,
+        sizeFormatted: "512 KB",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+    ],
+    "C:/Users/damao/Projects": [
+      {
+        name: "webapp",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 1800000,
+        lastModifiedFormatted: formatDate(Date.now() - 1800000),
+      },
+      {
+        name: "scripts",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 43200000,
+        lastModifiedFormatted: formatDate(Date.now() - 43200000),
+      },
+    ],
+    "/Users/damao/Desktop": [
+      {
+        name: "Netcatty",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 300000,
+        lastModifiedFormatted: formatDate(Date.now() - 300000),
+      },
+      {
+        name: "notes.txt",
+        type: "file",
+        size: 2048,
+        sizeFormatted: "2 KB",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+      {
+        name: "screenshot.png",
+        type: "file",
+        size: 1048576,
+        sizeFormatted: "1 MB",
+        lastModified: Date.now() - 43200000,
+        lastModifiedFormatted: formatDate(Date.now() - 43200000),
+      },
+    ],
+    "/Users/damao/Desktop/Netcatty": [
+      {
+        name: "src",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 600000,
+        lastModifiedFormatted: formatDate(Date.now() - 600000),
+      },
+      {
+        name: "package.json",
+        type: "file",
+        size: 1536,
+        sizeFormatted: "1.5 KB",
+        lastModified: Date.now() - 3600000,
+        lastModifiedFormatted: formatDate(Date.now() - 3600000),
+      },
+      {
+        name: "README.md",
+        type: "file",
+        size: 4096,
+        sizeFormatted: "4 KB",
+        lastModified: Date.now() - 7200000,
+        lastModifiedFormatted: formatDate(Date.now() - 7200000),
+      },
+      {
+        name: "tsconfig.json",
+        type: "file",
+        size: 512,
+        sizeFormatted: "512 Bytes",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+    ],
+    "/Users/damao/Documents": [
+      {
+        name: "Work",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+      {
+        name: "Personal",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 172800000,
+        lastModifiedFormatted: formatDate(Date.now() - 172800000),
+      },
+      {
+        name: "report.pdf",
+        type: "file",
+        size: 2097152,
+        sizeFormatted: "2 MB",
+        lastModified: Date.now() - 259200000,
+        lastModifiedFormatted: formatDate(Date.now() - 259200000),
+      },
+    ],
+    "/Users/damao/Downloads": [
+      {
+        name: "installer.exe",
+        type: "file",
+        size: 52428800,
+        sizeFormatted: "50 MB",
+        lastModified: Date.now() - 3600000,
+        lastModifiedFormatted: formatDate(Date.now() - 3600000),
+      },
+      {
+        name: "archive.zip",
+        type: "file",
+        size: 10485760,
+        sizeFormatted: "10 MB",
+        lastModified: Date.now() - 7200000,
+        lastModifiedFormatted: formatDate(Date.now() - 7200000),
+      },
+      {
+        name: "document.pdf",
+        type: "file",
+        size: 524288,
+        sizeFormatted: "512 KB",
+        lastModified: Date.now() - 86400000,
+        lastModifiedFormatted: formatDate(Date.now() - 86400000),
+      },
+    ],
+    "/Users/damao/Projects": [
+      {
+        name: "webapp",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 1800000,
+        lastModifiedFormatted: formatDate(Date.now() - 1800000),
+      },
+      {
+        name: "scripts",
+        type: "directory",
+        size: 0,
+        sizeFormatted: "--",
+        lastModified: Date.now() - 43200000,
+        lastModifiedFormatted: formatDate(Date.now() - 43200000),
+      },
+    ],
+  };
+  return mockData[normPath] || [];
+}

application/state/sftp/types.ts

@@ -0,0 +1,55 @@
+import { SftpConnection, SftpFileEntry, SftpFilenameEncoding } from "../../../domain/models";
+
+export interface SftpPane {
+  id: string;
+  connection: SftpConnection | null;
+  files: SftpFileEntry[];
+  loading: boolean;
+  reconnecting: boolean;
+  error: string | null;
+  selectedFiles: Set<string>;
+  filter: string;
+  filenameEncoding: SftpFilenameEncoding;
+}
+
+// Multi-tab state for left and right sides
+export interface SftpSideTabs {
+  tabs: SftpPane[];
+  activeTabId: string | null;
+}
+
+// Constants for empty placeholder pane IDs
+export const EMPTY_LEFT_PANE_ID = "__empty_left__";
+export const EMPTY_RIGHT_PANE_ID = "__empty_right__";
+
+export const createEmptyPane = (id?: string): SftpPane => ({
+  id: id || crypto.randomUUID(),
+  connection: null,
+  files: [],
+  loading: false,
+  reconnecting: false,
+  error: null,
+  selectedFiles: new Set(),
+  filter: "",
+  filenameEncoding: "auto",
+});
+
+// File watch event types
+export interface FileWatchSyncedEvent {
+  watchId: string;
+  localPath: string;
+  remotePath: string;
+  bytesWritten: number;
+}
+
+export interface FileWatchErrorEvent {
+  watchId: string;
+  localPath: string;
+  remotePath: string;
+  error: string;
+}
+
+export interface SftpStateOptions {
+  onFileWatchSynced?: (event: FileWatchSyncedEvent) => void;
+  onFileWatchError?: (event: FileWatchErrorEvent) => void;
+}

application/state/sftp/useSftpConnections.ts

@@ -0,0 +1,427 @@
+import { useCallback, useEffect, useRef } from "react";
+import type { MutableRefObject } from "react";
+import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
+import type { Host, Identity, SftpConnection, SftpFileEntry, SftpFilenameEncoding, SSHKey } from "../../../domain/models";
+import type { SftpPane } from "./types";
+import { useSftpDirectoryListing } from "./useSftpDirectoryListing";
+import { useSftpHostCredentials } from "./useSftpHostCredentials";
+
+interface UseSftpConnectionsParams {
+  hosts: Host[];
+  keys: SSHKey[];
+  identities: Identity[];
+  leftTabsRef: MutableRefObject<{ tabs: SftpPane[]; activeTabId: string | null }>;
+  rightTabsRef: MutableRefObject<{ tabs: SftpPane[]; activeTabId: string | null }>;
+  leftTabs: { tabs: SftpPane[] };
+  rightTabs: { tabs: SftpPane[] };
+  leftPane: SftpPane;
+  rightPane: SftpPane;
+  setLeftTabs: React.Dispatch<React.SetStateAction<{ tabs: SftpPane[]; activeTabId: string | null }>>;
+  setRightTabs: React.Dispatch<React.SetStateAction<{ tabs: SftpPane[]; activeTabId: string | null }>>;
+  getActivePane: (side: "left" | "right") => SftpPane | null;
+  updateTab: (side: "left" | "right", tabId: string, updater: (prev: SftpPane) => SftpPane) => void;
+  navSeqRef: MutableRefObject<{ left: number; right: number }>;
+  dirCacheRef: MutableRefObject<Map<string, { files: SftpFileEntry[]; timestamp: number }>>;
+  sftpSessionsRef: MutableRefObject<Map<string, string>>;
+  lastConnectedHostRef: MutableRefObject<{ left: Host | "local" | null; right: Host | "local" | null }>;
+  reconnectingRef: MutableRefObject<{ left: boolean; right: boolean }>;
+  makeCacheKey: (connectionId: string, path: string, encoding?: SftpFilenameEncoding) => string;
+  clearCacheForConnection: (connectionId: string) => void;
+  createEmptyPane: (id?: string) => SftpPane;
+}
+
+interface UseSftpConnectionsResult {
+  connect: (side: "left" | "right", host: Host | "local") => Promise<void>;
+  disconnect: (side: "left" | "right") => Promise<void>;
+  listLocalFiles: (path: string) => Promise<SftpFileEntry[]>;
+  listRemoteFiles: (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => Promise<SftpFileEntry[]>;
+}
+
+export const useSftpConnections = ({
+  hosts,
+  keys,
+  identities,
+  leftTabsRef,
+  rightTabsRef,
+  leftTabs,
+  rightTabs: _rightTabs,
+  leftPane,
+  rightPane,
+  setLeftTabs,
+  setRightTabs,
+  getActivePane,
+  updateTab,
+  navSeqRef,
+  dirCacheRef,
+  sftpSessionsRef,
+  lastConnectedHostRef,
+  reconnectingRef,
+  makeCacheKey,
+  clearCacheForConnection,
+  createEmptyPane,
+}: UseSftpConnectionsParams): UseSftpConnectionsResult => {
+  const getHostCredentials = useSftpHostCredentials({ hosts, keys, identities });
+  const { listLocalFiles, listRemoteFiles } = useSftpDirectoryListing();
+
+  const connect = useCallback(
+    async (side: "left" | "right", host: Host | "local") => {
+      const setTabs = side === "left" ? setLeftTabs : setRightTabs;
+
+      let activeTabId: string | null = null;
+      const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
+
+      if (!sideTabs.activeTabId) {
+        const newPane = createEmptyPane();
+        activeTabId = newPane.id;
+        setTabs((prev) => ({
+          tabs: [...prev.tabs, newPane],
+          activeTabId: newPane.id,
+        }));
+      } else {
+        activeTabId = sideTabs.activeTabId;
+      }
+
+      if (!activeTabId) return;
+
+      const connectionId = `${side}-${Date.now()}`;
+
+      navSeqRef.current[side] += 1;
+      const connectRequestId = navSeqRef.current[side];
+
+      lastConnectedHostRef.current[side] = host;
+
+      const currentPane = getActivePane(side);
+      // Reset encoding to host's configured encoding or "auto" when connecting to a new host
+      // This ensures proper auto-detection works and respects host-level encoding settings
+      const filenameEncoding: SftpFilenameEncoding =
+        host === "local" ? "auto" : (host.sftpEncoding ?? "auto");
+
+      if (currentPane?.connection) {
+        clearCacheForConnection(currentPane.connection.id);
+      }
+      if (currentPane?.connection && !currentPane.connection.isLocal) {
+        const oldSftpId = sftpSessionsRef.current.get(currentPane.connection.id);
+        if (oldSftpId) {
+          try {
+            await netcattyBridge.get()?.closeSftp(oldSftpId);
+          } catch {
+            // Ignore errors when closing stale SFTP sessions
+          }
+          sftpSessionsRef.current.delete(currentPane.connection.id);
+        }
+      }
+
+      if (host === "local") {
+        let homeDir = await netcattyBridge.get()?.getHomeDir?.();
+        if (!homeDir) {
+          const isWindows = navigator.platform.toLowerCase().includes("win");
+          homeDir = isWindows ? "C:\\Users\\damao" : "/Users/damao";
+        }
+
+        const connection: SftpConnection = {
+          id: connectionId,
+          hostId: "local",
+          hostLabel: "Local",
+          isLocal: true,
+          status: "connected",
+          currentPath: homeDir,
+          homeDir,
+        };
+
+        updateTab(side, activeTabId, (prev) => ({
+          ...prev,
+          connection,
+          loading: true,
+          reconnecting: false,
+          error: null,
+          filenameEncoding, // Reset encoding for new connection
+        }));
+
+        try {
+          const files = await listLocalFiles(homeDir);
+          if (navSeqRef.current[side] !== connectRequestId) return;
+          dirCacheRef.current.set(makeCacheKey(connectionId, homeDir, filenameEncoding), {
+            files,
+            timestamp: Date.now(),
+          });
+          reconnectingRef.current[side] = false;
+          updateTab(side, activeTabId, (prev) => ({
+            ...prev,
+            files,
+            loading: false,
+            reconnecting: false,
+          }));
+        } catch (err) {
+          if (navSeqRef.current[side] !== connectRequestId) return;
+          reconnectingRef.current[side] = false;
+          updateTab(side, activeTabId, (prev) => ({
+            ...prev,
+            error: err instanceof Error ? err.message : "Failed to list directory",
+            loading: false,
+            reconnecting: false,
+          }));
+        }
+      } else {
+        const connection: SftpConnection = {
+          id: connectionId,
+          hostId: host.id,
+          hostLabel: host.label,
+          isLocal: false,
+          status: "connecting",
+          currentPath: "/",
+        };
+
+        updateTab(side, activeTabId, (prev) => ({
+          ...prev,
+          connection,
+          loading: true,
+          reconnecting: prev.reconnecting,
+          error: null,
+          files: prev.reconnecting ? prev.files : [],
+          filenameEncoding, // Reset encoding for new connection
+        }));
+
+        try {
+          const credentials = getHostCredentials(host);
+          const bridge = netcattyBridge.get();
+          const openSftp = bridge?.openSftp;
+          if (!openSftp) throw new Error("SFTP bridge unavailable");
+
+          const isAuthError = (err: unknown): boolean => {
+            if (!(err instanceof Error)) return false;
+            const msg = err.message.toLowerCase();
+            return (
+              msg.includes("authentication") ||
+              msg.includes("auth") ||
+              msg.includes("password") ||
+              msg.includes("permission denied")
+            );
+          };
+
+          const hasKey = !!credentials.privateKey;
+          const hasPassword = !!credentials.password;
+
+          let sftpId: string | undefined;
+          if (hasKey) {
+            try {
+              const keyFirstCredentials = {
+                sessionId: `sftp-${connectionId}`,
+                ...credentials,
+              };
+              if (!credentials.sudo) {
+                keyFirstCredentials.password = undefined;
+              }
+              sftpId = await openSftp(keyFirstCredentials);
+            } catch (err) {
+              if (hasPassword && isAuthError(err)) {
+                sftpId = await openSftp({
+                  sessionId: `sftp-${connectionId}`,
+                  ...credentials,
+                  privateKey: undefined,
+                  certificate: undefined,
+                  publicKey: undefined,
+                  keyId: undefined,
+                  keySource: undefined,
+                });
+              } else {
+                throw err;
+              }
+            }
+          } else {
+            sftpId = await openSftp({
+              sessionId: `sftp-${connectionId}`,
+              ...credentials,
+            });
+          }
+
+          if (!sftpId) throw new Error("Failed to open SFTP session");
+
+          sftpSessionsRef.current.set(connectionId, sftpId);
+
+          let startPath = "/";
+          const statSftp = netcattyBridge.get()?.statSftp;
+          if (statSftp) {
+            const candidates: string[] = [];
+            if (credentials.username === "root") {
+              candidates.push("/root");
+            } else if (credentials.username) {
+              candidates.push(`/home/${credentials.username}`);
+              candidates.push("/root");
+            } else {
+              candidates.push("/root");
+            }
+            for (const candidate of candidates) {
+              try {
+                const stat = await statSftp(sftpId, candidate, filenameEncoding);
+                if (stat?.type === "directory") {
+                  startPath = candidate;
+                  break;
+                }
+              } catch {
+                // Ignore missing/permission errors
+              }
+            }
+          } else {
+            if (credentials.username === "root") {
+              try {
+                const rootFiles = await netcattyBridge.get()?.listSftp(sftpId, "/root", filenameEncoding);
+                if (rootFiles) startPath = "/root";
+              } catch {
+                // Fallback path not available
+              }
+            } else if (credentials.username) {
+              try {
+                const homeFiles = await netcattyBridge.get()?.listSftp(
+                  sftpId,
+                  `/home/${credentials.username}`,
+                  filenameEncoding,
+                );
+                if (homeFiles) startPath = `/home/${credentials.username}`;
+              } catch {
+                // Fall through to /root check
+              }
+              if (startPath === "/") {
+                try {
+                  const rootFiles = await netcattyBridge.get()?.listSftp(sftpId, "/root", filenameEncoding);
+                  if (rootFiles) startPath = "/root";
+                } catch {
+                  // Fallback path not available
+                }
+              }
+            } else {
+              try {
+                const rootFiles = await netcattyBridge.get()?.listSftp(sftpId, "/root", filenameEncoding);
+                if (rootFiles) startPath = "/root";
+              } catch {
+                // Fallback path not available
+              }
+            }
+          }
+
+          const files = await listRemoteFiles(sftpId, startPath, filenameEncoding);
+          if (navSeqRef.current[side] !== connectRequestId) return;
+          dirCacheRef.current.set(makeCacheKey(connectionId, startPath, filenameEncoding), {
+            files,
+            timestamp: Date.now(),
+          });
+
+          reconnectingRef.current[side] = false;
+
+          updateTab(side, activeTabId, (prev) => ({
+            ...prev,
+            connection: prev.connection
+              ? {
+                  ...prev.connection,
+                  status: "connected",
+                  currentPath: startPath,
+                  homeDir: startPath,
+                }
+              : null,
+            files,
+            loading: false,
+            reconnecting: false,
+          }));
+        } catch (err) {
+          if (navSeqRef.current[side] !== connectRequestId) return;
+          reconnectingRef.current[side] = false;
+          updateTab(side, activeTabId, (prev) => ({
+            ...prev,
+            connection: prev.connection
+              ? {
+                  ...prev.connection,
+                  status: "error",
+                  error: err instanceof Error ? err.message : "Connection failed",
+                }
+              : null,
+            error: err instanceof Error ? err.message : "Connection failed",
+            loading: false,
+            reconnecting: false,
+          }));
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      getHostCredentials,
+      getActivePane,
+      updateTab,
+      clearCacheForConnection,
+      makeCacheKey,
+      listLocalFiles,
+      listRemoteFiles,
+    ],
+  );
+
+  const initialConnectDoneRef = useRef(false);
+
+  useEffect(() => {
+    if (!initialConnectDoneRef.current && leftTabs.tabs.length === 0) {
+      initialConnectDoneRef.current = true;
+      setTimeout(() => {
+        connect("left", "local");
+      }, 0);
+    }
+  }, [connect, leftTabs.tabs.length]);
+
+  useEffect(() => {
+    const attemptReconnect = async (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 (leftPane.reconnecting && reconnectingRef.current.left) {
+      attemptReconnect("left");
+    }
+    if (rightPane.reconnecting && reconnectingRef.current.right) {
+      attemptReconnect("right");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [leftPane.reconnecting, rightPane.reconnecting, connect]);
+
+  const disconnect = useCallback(
+    async (side: "left" | "right") => {
+      const pane = getActivePane(side);
+      const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
+      const activeTabId = sideTabs.activeTabId;
+
+      if (!pane || !activeTabId) return;
+
+      navSeqRef.current[side] += 1;
+
+      if (pane.connection) {
+        clearCacheForConnection(pane.connection.id);
+      }
+
+      reconnectingRef.current[side] = false;
+      lastConnectedHostRef.current[side] = null;
+
+      if (pane.connection && !pane.connection.isLocal) {
+        const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+        if (sftpId) {
+          try {
+            await netcattyBridge.get()?.closeSftp(sftpId);
+          } catch {
+            // Ignore errors when closing SFTP session during disconnect
+          }
+          sftpSessionsRef.current.delete(pane.connection.id);
+        }
+      }
+
+      updateTab(side, activeTabId, () => createEmptyPane(activeTabId));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getActivePane, clearCacheForConnection, updateTab],
+  );
+
+  return {
+    connect,
+    disconnect,
+    listLocalFiles,
+    listRemoteFiles,
+  };
+};

application/state/sftp/useSftpDirectoryListing.ts

@@ -0,0 +1,61 @@
+import { useCallback } from "react";
+import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
+import type { SftpFileEntry, SftpFilenameEncoding } from "../../../domain/models";
+import { buildMockLocalFiles } from "./mockLocalFiles";
+import { formatFileSize } from "./utils";
+
+export const useSftpDirectoryListing = () => {
+  const getMockLocalFiles = useCallback((path: string): SftpFileEntry[] => {
+    return buildMockLocalFiles(path);
+  }, []);
+
+  const listLocalFiles = useCallback(
+    async (path: string): Promise<SftpFileEntry[]> => {
+      const rawFiles = await netcattyBridge.get()?.listLocalDir?.(path);
+      if (!rawFiles) {
+        return getMockLocalFiles(path);
+      }
+
+      return rawFiles.map((f) => {
+        const size = parseInt(f.size) || 0;
+        return {
+          name: f.name,
+          type: f.type as "file" | "directory" | "symlink",
+          size,
+          sizeFormatted: formatFileSize(size),
+          lastModified: new Date(f.lastModified).getTime(),
+          lastModifiedFormatted: f.lastModified,
+          linkTarget: f.linkTarget as "file" | "directory" | null | undefined,
+          hidden: f.hidden,
+        };
+      });
+    },
+    [getMockLocalFiles],
+  );
+
+  const listRemoteFiles = useCallback(
+    async (sftpId: string, path: string, encoding?: SftpFilenameEncoding): Promise<SftpFileEntry[]> => {
+      const rawFiles = await netcattyBridge.get()?.listSftp(sftpId, path, encoding);
+      if (!rawFiles) return [];
+
+      return rawFiles.map((f) => {
+        const size = parseInt(f.size) || 0;
+        return {
+          name: f.name,
+          type: f.type as "file" | "directory" | "symlink",
+          size,
+          sizeFormatted: formatFileSize(size),
+          lastModified: new Date(f.lastModified).getTime(),
+          lastModifiedFormatted: f.lastModified,
+          linkTarget: f.linkTarget as "file" | "directory" | null | undefined,
+        };
+      });
+    },
+    [],
+  );
+
+  return {
+    listLocalFiles,
+    listRemoteFiles,
+  };
+};

application/state/sftp/useSftpExternalOperations.ts

@@ -0,0 +1,430 @@
+import React, { useCallback, useRef, useMemo } from "react";
+import { TransferTask, TransferStatus } from "../../../domain/models";
+import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
+import { logger } from "../../../lib/logger";
+import { SftpPane } from "./types";
+import { joinPath } from "./utils";
+import {
+  UploadController,
+  uploadFromDataTransfer,
+  UploadBridge,
+  UploadCallbacks,
+  UploadResult,
+  UploadTaskInfo,
+} from "../../../lib/uploadService";
+
+// Re-export UploadResult for external usage
+export type { UploadResult };
+
+interface UseSftpExternalOperationsParams {
+  getActivePane: (side: "left" | "right") => SftpPane | null;
+  refresh: (side: "left" | "right") => Promise<void>;
+  sftpSessionsRef: React.MutableRefObject<Map<string, string>>;
+  addExternalUpload?: (task: TransferTask) => void;
+  updateExternalUpload?: (taskId: string, updates: Partial<TransferTask>) => void;
+  dismissExternalUpload?: (taskId: string) => void;
+}
+
+interface SftpExternalOperationsResult {
+  readTextFile: (side: "left" | "right", filePath: string) => Promise<string>;
+  readBinaryFile: (side: "left" | "right", filePath: string) => Promise<ArrayBuffer>;
+  writeTextFile: (side: "left" | "right", filePath: string, content: string) => Promise<void>;
+  downloadToTempAndOpen: (
+    side: "left" | "right",
+    remotePath: string,
+    fileName: string,
+    appPath: string,
+    options?: { enableWatch?: boolean }
+  ) => Promise<{ localTempPath: string; watchId?: string }>;
+  uploadExternalFiles: (
+    side: "left" | "right",
+    dataTransfer: DataTransfer
+  ) => Promise<UploadResult[]>;
+  cancelExternalUpload: () => Promise<void>;
+  selectApplication: () => Promise<{ path: string; name: string } | null>;
+}
+
+export const useSftpExternalOperations = (
+  params: UseSftpExternalOperationsParams
+): SftpExternalOperationsResult => {
+  const { getActivePane, refresh, sftpSessionsRef, addExternalUpload, updateExternalUpload, dismissExternalUpload } = params;
+
+  // Upload controller for cancellation support
+  const uploadControllerRef = useRef<UploadController | null>(null);
+
+  const readTextFile = useCallback(
+    async (side: "left" | "right", filePath: string): Promise<string> => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) {
+        throw new Error("No connection available");
+      }
+
+      if (pane.connection.isLocal) {
+        const bridge = netcattyBridge.get();
+        if (bridge?.readLocalFile) {
+          const buffer = await bridge.readLocalFile(filePath);
+          return new TextDecoder().decode(buffer);
+        }
+        throw new Error("Local file reading not supported");
+      }
+
+      const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+      if (!sftpId) {
+        throw new Error("SFTP session not found");
+      }
+
+      const bridge = netcattyBridge.get();
+      if (!bridge) {
+        throw new Error("Bridge not available");
+      }
+
+      return await bridge.readSftp(sftpId, filePath, pane.filenameEncoding);
+    },
+    [getActivePane, sftpSessionsRef],
+  );
+
+  const readBinaryFile = useCallback(
+    async (side: "left" | "right", filePath: string): Promise<ArrayBuffer> => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) {
+        throw new Error("No connection available");
+      }
+
+      if (pane.connection.isLocal) {
+        const bridge = netcattyBridge.get();
+        if (bridge?.readLocalFile) {
+          return await bridge.readLocalFile(filePath);
+        }
+        throw new Error("Local file reading not supported");
+      }
+
+      const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+      if (!sftpId) {
+        throw new Error("SFTP session not found");
+      }
+
+      const bridge = netcattyBridge.get();
+      if (!bridge?.readSftpBinary) {
+        throw new Error("Binary file reading not supported");
+      }
+
+      return await bridge.readSftpBinary(sftpId, filePath, pane.filenameEncoding);
+    },
+    [getActivePane, sftpSessionsRef],
+  );
+
+  const writeTextFile = useCallback(
+    async (side: "left" | "right", filePath: string, content: string): Promise<void> => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) {
+        throw new Error("No connection available");
+      }
+
+      if (pane.connection.isLocal) {
+        const bridge = netcattyBridge.get();
+        if (bridge?.writeLocalFile) {
+          const data = new TextEncoder().encode(content);
+          await bridge.writeLocalFile(filePath, data.buffer);
+          return;
+        }
+        throw new Error("Local file writing not supported");
+      }
+
+      const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+      if (!sftpId) {
+        throw new Error("SFTP session not found");
+      }
+
+      const bridge = netcattyBridge.get();
+      if (!bridge) {
+        throw new Error("Bridge not available");
+      }
+
+      await bridge.writeSftp(sftpId, filePath, content, pane.filenameEncoding);
+    },
+    [getActivePane, sftpSessionsRef],
+  );
+
+  const downloadToTempAndOpen = useCallback(
+    async (
+      side: "left" | "right",
+      remotePath: string,
+      fileName: string,
+      appPath: string,
+      options?: { enableWatch?: boolean }
+    ): Promise<{ localTempPath: string; watchId?: string }> => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) {
+        throw new Error("No connection available");
+      }
+
+      const bridge = netcattyBridge.get();
+      if (!bridge?.downloadSftpToTemp || !bridge?.openWithApplication) {
+        throw new Error("System app opening not supported");
+      }
+
+      if (pane.connection.isLocal) {
+        await bridge.openWithApplication(remotePath, appPath);
+        return { localTempPath: remotePath };
+      }
+
+      const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+      if (!sftpId) {
+        throw new Error("SFTP session not found");
+      }
+
+      console.log("[SFTP] Downloading file to temp", { sftpId, remotePath, fileName });
+      const localTempPath = await bridge.downloadSftpToTemp(
+        sftpId,
+        remotePath,
+        fileName,
+        pane.filenameEncoding,
+      );
+      console.log("[SFTP] File downloaded to temp", { localTempPath });
+
+      if (bridge.registerTempFile) {
+        try {
+          await bridge.registerTempFile(sftpId, localTempPath);
+        } catch (err) {
+          console.warn("[SFTP] Failed to register temp file for cleanup:", err);
+        }
+      }
+
+      console.log("[SFTP] Opening with application", { localTempPath, appPath });
+      await bridge.openWithApplication(localTempPath, appPath);
+      console.log("[SFTP] Application launched");
+
+      let watchId: string | undefined;
+      console.log("[SFTP] Auto-sync enabled check", { enableWatch: options?.enableWatch, hasStartFileWatch: !!bridge.startFileWatch });
+      if (options?.enableWatch && bridge.startFileWatch) {
+        try {
+          console.log("[SFTP] Starting file watch", { localTempPath, remotePath, sftpId });
+          const result = await bridge.startFileWatch(
+            localTempPath,
+            remotePath,
+            sftpId,
+            pane.filenameEncoding,
+          );
+          watchId = result.watchId;
+          console.log("[SFTP] File watch started successfully", { watchId, localTempPath, remotePath });
+        } catch (err) {
+          console.warn("[SFTP] Failed to start file watch:", err);
+        }
+      } else {
+        console.log("[SFTP] File watching not enabled or not available");
+      }
+
+      return { localTempPath, watchId };
+    },
+    [getActivePane, sftpSessionsRef],
+  );
+
+  // Create upload callbacks that translate to TransferTask updates
+  const createUploadCallbacks = useCallback((
+    connectionId: string,
+    targetPath: string
+  ): UploadCallbacks => {
+    return {
+      onScanningStart: (taskId: string) => {
+        if (addExternalUpload) {
+          const scanningTask: TransferTask = {
+            id: taskId,
+            fileName: "Scanning files...",
+            sourcePath: "local",
+            targetPath,
+            sourceConnectionId: "external",
+            targetConnectionId: connectionId,
+            direction: "upload",
+            status: "pending" as TransferStatus,
+            totalBytes: 0,
+            transferredBytes: 0,
+            speed: 0,
+            startTime: Date.now(),
+            isDirectory: true,
+          };
+          addExternalUpload(scanningTask);
+        }
+      },
+      onScanningEnd: (taskId: string) => {
+        if (dismissExternalUpload) {
+          dismissExternalUpload(taskId);
+        }
+      },
+      onTaskCreated: (task: UploadTaskInfo) => {
+        if (addExternalUpload) {
+          const transferTask: TransferTask = {
+            id: task.id,
+            fileName: task.displayName,
+            sourcePath: "local",
+            targetPath: joinPath(targetPath, task.fileName),
+            sourceConnectionId: "external",
+            targetConnectionId: connectionId,
+            direction: "upload",
+            status: "transferring" as TransferStatus,
+            totalBytes: task.totalBytes,
+            transferredBytes: 0,
+            speed: 0,
+            startTime: Date.now(),
+            isDirectory: task.isDirectory,
+          };
+          addExternalUpload(transferTask);
+        }
+      },
+      onTaskProgress: (taskId: string, progress) => {
+        if (updateExternalUpload) {
+          updateExternalUpload(taskId, {
+            transferredBytes: progress.transferred,
+            speed: progress.speed,
+          });
+        }
+      },
+      onTaskCompleted: (taskId: string, totalBytes: number) => {
+        if (updateExternalUpload) {
+          updateExternalUpload(taskId, {
+            status: "completed" as TransferStatus,
+            endTime: Date.now(),
+            transferredBytes: totalBytes,
+            speed: 0,
+          });
+        }
+      },
+      onTaskFailed: (taskId: string, error: string) => {
+        if (updateExternalUpload) {
+          updateExternalUpload(taskId, {
+            status: "failed" as TransferStatus,
+            endTime: Date.now(),
+            error,
+            speed: 0,
+          });
+        }
+      },
+      onTaskCancelled: (taskId: string) => {
+        if (updateExternalUpload) {
+          updateExternalUpload(taskId, {
+            status: "cancelled" as TransferStatus,
+            endTime: Date.now(),
+            speed: 0,
+          });
+        }
+      },
+    };
+  }, [addExternalUpload, updateExternalUpload, dismissExternalUpload]);
+
+  // Create upload bridge that wraps netcattyBridge
+  const createUploadBridge = useMemo((): UploadBridge => {
+    const bridge = netcattyBridge.get();
+    return {
+      writeLocalFile: bridge?.writeLocalFile,
+      mkdirLocal: bridge?.mkdirLocal,
+      mkdirSftp: async (sftpId: string, path: string) => {
+        const b = netcattyBridge.get();
+        if (b?.mkdirSftp) {
+          await b.mkdirSftp(sftpId, path);
+        }
+      },
+      writeSftpBinary: bridge?.writeSftpBinary,
+      // Wrap writeSftpBinaryWithProgress to adapt UploadBridge interface to NetcattyBridge interface
+      // UploadBridge: (sftpId, path, data, taskId, onProgress, onComplete, onError)
+      // NetcattyBridge: (sftpId, path, content, transferId, encoding, onProgress, onComplete, onError)
+      writeSftpBinaryWithProgress: bridge?.writeSftpBinaryWithProgress
+        ? async (sftpId, path, data, taskId, onProgress, onComplete, onError) => {
+            const b = netcattyBridge.get();
+            if (!b?.writeSftpBinaryWithProgress) return undefined;
+            // Pass undefined for encoding to use session default, and forward callbacks
+            return b.writeSftpBinaryWithProgress(
+              sftpId,
+              path,
+              data,
+              taskId,
+              undefined, // encoding - use session default
+              onProgress,
+              onComplete,
+              onError
+            );
+          }
+        : undefined,
+      cancelSftpUpload: bridge?.cancelSftpUpload,
+    };
+  }, []);
+
+  const uploadExternalFiles = useCallback(
+    async (side: "left" | "right", dataTransfer: DataTransfer): Promise<UploadResult[]> => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) {
+        throw new Error("No active connection");
+      }
+
+      const bridge = netcattyBridge.get();
+      if (!bridge) {
+        throw new Error("Bridge not available");
+      }
+
+      const sftpId = pane.connection.isLocal
+        ? null
+        : sftpSessionsRef.current.get(pane.connection.id) || null;
+
+      if (!pane.connection.isLocal && !sftpId) {
+        throw new Error("SFTP session not found");
+      }
+
+      // Create a new upload controller for this upload
+      const controller = new UploadController();
+      uploadControllerRef.current = controller;
+
+      const callbacks = createUploadCallbacks(pane.connection.id, pane.connection.currentPath);
+
+      try {
+        const results = await uploadFromDataTransfer(
+          dataTransfer,
+          {
+            targetPath: pane.connection.currentPath,
+            sftpId,
+            isLocal: pane.connection.isLocal,
+            bridge: createUploadBridge,
+            joinPath,
+            callbacks,
+          },
+          controller
+        );
+
+        await refresh(side);
+        return results;
+      } catch (error) {
+        logger.error("[SFTP] Upload failed:", error);
+        throw error;
+      } finally {
+        uploadControllerRef.current = null;
+      }
+    },
+    [getActivePane, refresh, sftpSessionsRef, createUploadCallbacks, createUploadBridge],
+  );
+
+  const cancelExternalUpload = useCallback(async () => {
+    const controller = uploadControllerRef.current;
+    if (controller) {
+      logger.info("[SFTP] Cancelling external upload");
+      await controller.cancel();
+    }
+  }, []);
+
+  const selectApplication = useCallback(
+    async (): Promise<{ path: string; name: string } | null> => {
+      const bridge = netcattyBridge.get();
+      if (!bridge?.selectApplication) {
+        return null;
+      }
+      return await bridge.selectApplication();
+    },
+    [],
+  );
+
+  return {
+    readTextFile,
+    readBinaryFile,
+    writeTextFile,
+    downloadToTempAndOpen,
+    uploadExternalFiles,
+    cancelExternalUpload,
+    selectApplication,
+  };
+};

application/state/sftp/useSftpFileWatch.ts

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
+import type { FileWatchErrorEvent, FileWatchSyncedEvent, SftpStateOptions } from "./types";
+
+export const useSftpFileWatch = (options?: SftpStateOptions) => {
+  useEffect(() => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.onFileWatchSynced || !bridge?.onFileWatchError) return;
+
+    const unsubscribeSynced = bridge.onFileWatchSynced((payload: FileWatchSyncedEvent) => {
+      options?.onFileWatchSynced?.(payload);
+    });
+
+    const unsubscribeError = bridge.onFileWatchError((payload: FileWatchErrorEvent) => {
+      options?.onFileWatchError?.(payload);
+    });
+
+    return () => {
+      try {
+        unsubscribeSynced?.();
+        unsubscribeError?.();
+      } catch {
+        // ignore cleanup errors
+      }
+    };
+  }, [options]);
+};

application/state/sftp/useSftpHostCredentials.ts

@@ -0,0 +1,75 @@
+import { useCallback } from "react";
+import type { Host, Identity, SSHKey } from "../../../domain/models";
+import { resolveHostAuth } from "../../../domain/sshAuth";
+
+interface UseSftpHostCredentialsParams {
+  hosts: Host[];
+  keys: SSHKey[];
+  identities: Identity[];
+}
+
+export const useSftpHostCredentials = ({
+  hosts,
+  keys,
+  identities,
+}: UseSftpHostCredentialsParams) =>
+  useCallback(
+    (host: Host): NetcattySSHOptions => {
+      const resolved = resolveHostAuth({ host, keys, identities });
+      const key = resolved.key || null;
+
+      const proxyConfig = host.proxyConfig
+        ? {
+            type: host.proxyConfig.type,
+            host: host.proxyConfig.host,
+            port: host.proxyConfig.port,
+            username: host.proxyConfig.username,
+            password: host.proxyConfig.password,
+          }
+        : undefined;
+
+      let jumpHosts: NetcattyJumpHost[] | undefined;
+      if (host.hostChain?.hostIds && host.hostChain.hostIds.length > 0) {
+        jumpHosts = host.hostChain.hostIds
+          .map((hostId) => hosts.find((h) => h.id === hostId))
+          .filter((h): h is Host => !!h)
+          .map((jumpHost) => {
+            const jumpAuth = resolveHostAuth({
+              host: jumpHost,
+              keys,
+              identities,
+            });
+            const jumpKey = jumpAuth.key;
+            return {
+              hostname: jumpHost.hostname,
+              port: jumpHost.port || 22,
+              username: jumpAuth.username || "root",
+              password: jumpAuth.password,
+              privateKey: jumpKey?.privateKey,
+              certificate: jumpKey?.certificate,
+              passphrase: jumpAuth.passphrase || jumpKey?.passphrase,
+              publicKey: jumpKey?.publicKey,
+              keyId: jumpAuth.keyId,
+              keySource: jumpKey?.source,
+              label: jumpHost.label,
+            };
+          });
+      }
+
+      return {
+        hostname: host.hostname,
+        username: resolved.username,
+        port: host.port || 22,
+        password: resolved.password,
+        privateKey: key?.privateKey,
+        certificate: key?.certificate,
+        publicKey: key?.publicKey,
+        keyId: resolved.keyId,
+        keySource: key?.source,
+        proxy: proxyConfig,
+        jumpHosts: jumpHosts && jumpHosts.length > 0 ? jumpHosts : undefined,
+        sudo: host.sftpSudo,
+      };
+    },
+    [hosts, identities, keys],
+  );

application/state/sftp/useSftpPaneActions.ts

@@ -0,0 +1,535 @@
+import { useCallback } from "react";
+import type { Host, SftpFileEntry, SftpFilenameEncoding } from "../../../domain/models";
+import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
+import { logger } from "../../../lib/logger";
+import { SftpPane } from "./types";
+import { getParentPath, isNavigableDirectory, isWindowsRoot, joinPath } from "./utils";
+
+interface UseSftpPaneActionsParams {
+  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;
+  leftTabsRef: React.MutableRefObject<{ tabs: SftpPane[]; activeTabId: string | null }>;
+  rightTabsRef: React.MutableRefObject<{ tabs: SftpPane[]; activeTabId: string | null }>;
+  navSeqRef: React.MutableRefObject<{ left: number; right: number }>;
+  dirCacheRef: React.MutableRefObject<Map<string, { files: SftpFileEntry[]; timestamp: number }>>;
+  sftpSessionsRef: React.MutableRefObject<Map<string, string>>;
+  lastConnectedHostRef: React.MutableRefObject<{ left: Host | "local" | null; right: Host | "local" | null }>;
+  reconnectingRef: React.MutableRefObject<{ left: boolean; right: boolean }>;
+  makeCacheKey: (connectionId: string, path: string, encoding?: SftpFilenameEncoding) => string;
+  clearCacheForConnection: (connectionId: string) => void;
+  listLocalFiles: (path: string) => Promise<SftpFileEntry[]>;
+  listRemoteFiles: (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => Promise<SftpFileEntry[]>;
+  handleSessionError: (side: "left" | "right", error: Error) => void;
+  isSessionError: (err: unknown) => boolean;
+  dirCacheTtlMs: number;
+}
+
+interface UseSftpPaneActionsResult {
+  navigateTo: (side: "left" | "right", path: string, options?: { force?: boolean }) => Promise<void>;
+  refresh: (side: "left" | "right") => Promise<void>;
+  navigateUp: (side: "left" | "right") => Promise<void>;
+  openEntry: (side: "left" | "right", entry: SftpFileEntry) => Promise<void>;
+  toggleSelection: (side: "left" | "right", fileName: string, multiSelect: boolean) => void;
+  rangeSelect: (side: "left" | "right", fileNames: string[]) => void;
+  clearSelection: (side: "left" | "right") => void;
+  selectAll: (side: "left" | "right") => void;
+  setFilter: (side: "left" | "right", filter: string) => void;
+  getFilteredFiles: (pane: SftpPane) => SftpFileEntry[];
+  createDirectory: (side: "left" | "right", name: string) => Promise<void>;
+  createFile: (side: "left" | "right", name: string) => Promise<void>;
+  deleteFiles: (side: "left" | "right", fileNames: string[]) => Promise<void>;
+  renameFile: (side: "left" | "right", oldName: string, newName: string) => Promise<void>;
+  changePermissions: (side: "left" | "right", filePath: string, mode: string) => Promise<void>;
+}
+
+export const useSftpPaneActions = ({
+  getActivePane,
+  updateTab,
+  updateActiveTab,
+  leftTabsRef,
+  rightTabsRef,
+  navSeqRef,
+  dirCacheRef,
+  sftpSessionsRef,
+  lastConnectedHostRef,
+  reconnectingRef,
+  makeCacheKey,
+  clearCacheForConnection,
+  listLocalFiles,
+  listRemoteFiles,
+  handleSessionError,
+  isSessionError,
+  dirCacheTtlMs,
+}: UseSftpPaneActionsParams): UseSftpPaneActionsResult => {
+  const navigateTo = useCallback(
+    async (
+      side: "left" | "right",
+      path: string,
+      options?: { force?: boolean },
+    ) => {
+      console.log("[SFTP navigateTo] called", { side, path, force: options?.force });
+
+      const pane = getActivePane(side);
+      const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
+      const activeTabId = sideTabs.activeTabId;
+
+      console.log("[SFTP navigateTo] state check", {
+        paneId: pane?.id,
+        hasConnection: !!pane?.connection,
+        activeTabId,
+        currentPath: pane?.connection?.currentPath,
+      });
+
+      if (!pane?.connection || !activeTabId) {
+        console.log("[SFTP navigateTo] No pane/connection/activeTabId, returning early");
+        return;
+      }
+
+      const requestId = ++navSeqRef.current[side];
+      const cacheKey = makeCacheKey(pane.connection.id, path, pane.filenameEncoding);
+      const cached = options?.force
+        ? undefined
+        : dirCacheRef.current.get(cacheKey);
+
+      if (
+        cached &&
+        Date.now() - cached.timestamp < dirCacheTtlMs &&
+        cached.files
+      ) {
+        console.log("[SFTP navigateTo] Using cached files for path", { path, cacheKey });
+        updateTab(side, activeTabId, (prev) => ({
+          ...prev,
+          connection: prev.connection
+            ? { ...prev.connection, currentPath: path }
+            : null,
+          files: cached.files,
+          loading: false,
+          error: null,
+          selectedFiles: new Set(),
+        }));
+        return;
+      }
+
+      console.log("[SFTP navigateTo] Fetching files from server for path", { path });
+      updateTab(side, activeTabId, (prev) => ({ ...prev, loading: true, error: null }));
+
+      try {
+        let files: SftpFileEntry[];
+
+        if (pane.connection.isLocal) {
+          files = await listLocalFiles(path);
+        } else {
+          const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+          if (!sftpId) {
+            clearCacheForConnection(pane.connection.id);
+            updateTab(side, activeTabId, (prev) => ({
+              ...prev,
+              connection: null,
+              files: [],
+              loading: false,
+              reconnecting: false,
+              error: "SFTP session lost. Please reconnect.",
+              selectedFiles: new Set(),
+              filter: "",
+            }));
+            return;
+          }
+
+          try {
+            files = await listRemoteFiles(sftpId, path, pane.filenameEncoding);
+          } catch (err) {
+            if (isSessionError(err)) {
+              sftpSessionsRef.current.delete(pane.connection.id);
+              clearCacheForConnection(pane.connection.id);
+              updateTab(side, activeTabId, (prev) => ({
+                ...prev,
+                connection: null,
+                files: [],
+                loading: false,
+                reconnecting: false,
+                error: "SFTP session expired. Please reconnect.",
+                selectedFiles: new Set(),
+                filter: "",
+              }));
+              return;
+            }
+            throw err as Error;
+          }
+        }
+
+        if (navSeqRef.current[side] !== requestId) return;
+
+        dirCacheRef.current.set(cacheKey, {
+          files,
+          timestamp: Date.now(),
+        });
+
+        updateTab(side, activeTabId, (prev) => ({
+          ...prev,
+          connection: prev.connection
+            ? { ...prev.connection, currentPath: path }
+            : null,
+          files,
+          loading: false,
+          selectedFiles: new Set(),
+        }));
+      } catch (err) {
+        if (navSeqRef.current[side] !== requestId) return;
+        updateTab(side, activeTabId, (prev) => ({
+          ...prev,
+          error:
+            err instanceof Error ? err.message : "Failed to list directory",
+          loading: false,
+        }));
+      }
+    },
+    [
+      getActivePane,
+      updateTab,
+      leftTabsRef,
+      rightTabsRef,
+      navSeqRef,
+      dirCacheRef,
+      makeCacheKey,
+      dirCacheTtlMs,
+      listLocalFiles,
+      listRemoteFiles,
+      sftpSessionsRef,
+      clearCacheForConnection,
+      isSessionError,
+    ],
+  );
+
+  const refresh = useCallback(
+    async (side: "left" | "right") => {
+      const pane = getActivePane(side);
+      if (pane?.connection) {
+        await navigateTo(side, pane.connection.currentPath, { force: true });
+      } else if (!pane?.connection && pane?.error) {
+        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",
+          }));
+        }
+      }
+    },
+    [getActivePane, navigateTo, updateActiveTab, lastConnectedHostRef, reconnectingRef],
+  );
+
+  const navigateUp = useCallback(
+    async (side: "left" | "right") => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) return;
+
+      const currentPath = pane.connection.currentPath;
+      const isAtRoot = currentPath === "/" || isWindowsRoot(currentPath);
+
+      if (!isAtRoot) {
+        const parentPath = getParentPath(currentPath);
+        await navigateTo(side, parentPath);
+      }
+    },
+    [getActivePane, navigateTo],
+  );
+
+  const openEntry = useCallback(
+    async (side: "left" | "right", entry: SftpFileEntry) => {
+      console.log("[SFTP openEntry] called", { side, entryName: entry.name, entryType: entry.type });
+
+      const pane = getActivePane(side);
+      console.log("[SFTP openEntry] getActivePane result", {
+        paneId: pane?.id,
+        hasConnection: !!pane?.connection,
+        currentPath: pane?.connection?.currentPath,
+      });
+
+      if (!pane?.connection) {
+        console.log("[SFTP openEntry] No pane or connection, returning early");
+        return;
+      }
+
+      if (entry.name === "..") {
+        const currentPath = pane.connection.currentPath;
+        const isAtRoot = currentPath === "/" || isWindowsRoot(currentPath);
+        console.log("[SFTP openEntry] Navigating up from '..'", {
+          currentPath,
+          isAtRoot,
+          isWindowsRoot: isWindowsRoot(currentPath),
+        });
+
+        if (!isAtRoot) {
+          const parentPath = getParentPath(currentPath);
+          console.log("[SFTP openEntry] Calculated parent path", { currentPath, parentPath });
+          await navigateTo(side, parentPath);
+        } else {
+          console.log("[SFTP openEntry] Already at root, not navigating");
+        }
+        return;
+      }
+
+      if (isNavigableDirectory(entry)) {
+        const newPath = joinPath(pane.connection.currentPath, entry.name);
+        console.log("[SFTP openEntry] Navigating into directory", { currentPath: pane.connection.currentPath, entryName: entry.name, newPath });
+        await navigateTo(side, newPath);
+      }
+    },
+    [getActivePane, navigateTo],
+  );
+
+  const toggleSelection = useCallback(
+    (side: "left" | "right", fileName: string, multiSelect: boolean) => {
+      updateActiveTab(side, (prev) => {
+        const newSelection = new Set(multiSelect ? prev.selectedFiles : []);
+        if (newSelection.has(fileName)) {
+          newSelection.delete(fileName);
+        } else {
+          newSelection.add(fileName);
+        }
+        return { ...prev, selectedFiles: newSelection };
+      });
+    },
+    [updateActiveTab],
+  );
+
+  const rangeSelect = useCallback(
+    (side: "left" | "right", fileNames: string[]) => {
+      const newSelection = new Set<string>();
+      for (const name of fileNames) {
+        if (name && name !== "..") {
+          newSelection.add(name);
+        }
+      }
+
+      updateActiveTab(side, (prev) => ({ ...prev, selectedFiles: newSelection }));
+    },
+    [updateActiveTab],
+  );
+
+  const clearSelection = useCallback((side: "left" | "right") => {
+    updateActiveTab(side, (prev) => ({ ...prev, selectedFiles: new Set() }));
+  }, [updateActiveTab]);
+
+  const selectAll = useCallback(
+    (side: "left" | "right") => {
+      const pane = getActivePane(side);
+      if (!pane) return;
+
+      updateActiveTab(side, (prev) => ({
+        ...prev,
+        selectedFiles: new Set(
+          pane.files.filter((f) => f.name !== "..").map((f) => f.name),
+        ),
+      }));
+    },
+    [getActivePane, updateActiveTab],
+  );
+
+  const setFilter = useCallback((side: "left" | "right", filter: string) => {
+    updateActiveTab(side, (prev) => ({ ...prev, filter }));
+  }, [updateActiveTab]);
+
+  const getFilteredFiles = useCallback((pane: SftpPane): SftpFileEntry[] => {
+    const term = pane.filter.trim().toLowerCase();
+    if (!term) return pane.files;
+    return pane.files.filter(
+      (f) => f.name === ".." || f.name.toLowerCase().includes(term),
+    );
+  }, []);
+
+  const createDirectory = useCallback(
+    async (side: "left" | "right", name: string) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) return;
+
+      const fullPath = joinPath(pane.connection.currentPath, name);
+
+      try {
+        if (pane.connection.isLocal) {
+          await netcattyBridge.get()?.mkdirLocal?.(fullPath);
+        } else {
+          const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+          if (!sftpId) {
+            handleSessionError(side, new Error("SFTP session not found"));
+            return;
+          }
+          await netcattyBridge.get()?.mkdirSftp(sftpId, fullPath, pane.filenameEncoding);
+        }
+        await refresh(side);
+      } catch (err) {
+        if (isSessionError(err)) {
+          handleSessionError(side, err as Error);
+          return;
+        }
+        throw err;
+      }
+    },
+    [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
+  );
+
+  const createFile = useCallback(
+    async (side: "left" | "right", name: string) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) return;
+
+      const fullPath = joinPath(pane.connection.currentPath, name);
+
+      try {
+        if (pane.connection.isLocal) {
+          const bridge = netcattyBridge.get();
+          if (bridge?.writeLocalFile) {
+            const emptyBuffer = new ArrayBuffer(0);
+            await bridge.writeLocalFile(fullPath, emptyBuffer);
+          } else {
+            throw new Error("Local file writing not supported");
+          }
+        } else {
+          const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+          if (!sftpId) {
+            handleSessionError(side, new Error("SFTP session not found"));
+            return;
+          }
+          const bridge = netcattyBridge.get();
+          if (bridge?.writeSftpBinary) {
+            const emptyBuffer = new ArrayBuffer(0);
+            await bridge.writeSftpBinary(sftpId, fullPath, emptyBuffer, pane.filenameEncoding);
+          } else if (bridge?.writeSftp) {
+            await bridge.writeSftp(sftpId, fullPath, "", pane.filenameEncoding);
+          } else {
+            throw new Error("No write method available");
+          }
+        }
+        await refresh(side);
+      } catch (err) {
+        if (isSessionError(err)) {
+          handleSessionError(side, err as Error);
+          return;
+        }
+        throw err;
+      }
+    },
+    [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
+  );
+
+  const deleteFiles = useCallback(
+    async (side: "left" | "right", fileNames: string[]) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) return;
+
+      try {
+        for (const name of fileNames) {
+          const fullPath = joinPath(pane.connection.currentPath, name);
+
+          if (pane.connection.isLocal) {
+            await netcattyBridge.get()?.deleteLocalFile?.(fullPath);
+          } else {
+            const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+            if (!sftpId) {
+              handleSessionError(side, new Error("SFTP session not found"));
+              return;
+            }
+            await netcattyBridge.get()?.deleteSftp?.(sftpId, fullPath, pane.filenameEncoding);
+          }
+        }
+        await refresh(side);
+      } catch (err) {
+        if (isSessionError(err)) {
+          handleSessionError(side, err as Error);
+          return;
+        }
+        throw err;
+      }
+    },
+    [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
+  );
+
+  const renameFile = useCallback(
+    async (side: "left" | "right", oldName: string, newName: string) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection) return;
+
+      const oldPath = joinPath(pane.connection.currentPath, oldName);
+      const newPath = joinPath(pane.connection.currentPath, 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);
+        }
+        await refresh(side);
+      } catch (err) {
+        if (isSessionError(err)) {
+          handleSessionError(side, err as Error);
+          return;
+        }
+        throw err;
+      }
+    },
+    [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
+  );
+
+  const changePermissions = useCallback(
+    async (
+      side: "left" | "right",
+      filePath: string,
+      mode: string,
+    ) => {
+      const pane = getActivePane(side);
+      if (!pane?.connection || pane.connection.isLocal) {
+        logger.warn("Cannot change permissions on local files");
+        return;
+      }
+
+      const sftpId = sftpSessionsRef.current.get(pane.connection.id);
+      if (!sftpId || !netcattyBridge.get()?.chmodSftp) {
+        handleSessionError(side, new Error("SFTP session not found"));
+        return;
+      }
+
+      try {
+        await netcattyBridge.get()!.chmodSftp!(sftpId, filePath, mode, pane.filenameEncoding);
+        await refresh(side);
+      } catch (err) {
+        if (isSessionError(err)) {
+          handleSessionError(side, err as Error);
+          return;
+        }
+        logger.error("Failed to change permissions:", err);
+      }
+    },
+    [getActivePane, refresh, handleSessionError, sftpSessionsRef, isSessionError],
+  );
+
+  return {
+    navigateTo,
+    refresh,
+    navigateUp,
+    openEntry,
+    toggleSelection,
+    rangeSelect,
+    clearSelection,
+    selectAll,
+    setFilter,
+    getFilteredFiles,
+    createDirectory,
+    createFile,
+    deleteFiles,
+    renameFile,
+    changePermissions,
+  };
+};

application/state/sftp/useSftpSessionCleanup.ts

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import type { MutableRefObject } from "react";
+import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
+
+export const useSftpSessionCleanup = (sftpSessionsRef: MutableRefObject<Map<string, string>>) => {
+  useEffect(() => {
+    const sessionsRef = sftpSessionsRef.current;
+
+    return () => {
+      sessionsRef.forEach(async (sftpId) => {
+        try {
+          await netcattyBridge.get()?.closeSftp(sftpId);
+        } catch {
+          // Ignore errors when closing SFTP sessions during cleanup
+        }
+      });
+    };
+  }, [sftpSessionsRef]);
+};

application/state/sftp/useSftpSessionErrors.ts

@@ -0,0 +1,78 @@
+import { useCallback } from "react";
+import type { MutableRefObject } from "react";
+import type { Host } from "../../../domain/models";
+import type { SftpPane } from "./types";
+
+interface UseSftpSessionErrorsParams {
+  getActivePane: (side: "left" | "right") => SftpPane | null;
+  leftTabsRef: MutableRefObject<{ tabs: SftpPane[]; activeTabId: string | null }>;
+  rightTabsRef: MutableRefObject<{ tabs: SftpPane[]; activeTabId: string | null }>;
+  updateActiveTab: (
+    side: "left" | "right",
+    updater: (prev: SftpPane) => SftpPane,
+  ) => void;
+  sftpSessionsRef: MutableRefObject<Map<string, string>>;
+  clearCacheForConnection: (connectionId: string) => void;
+  navSeqRef: MutableRefObject<{ left: number; right: number }>;
+  lastConnectedHostRef: MutableRefObject<{ left: Host | "local" | null; right: Host | "local" | null }>;
+  reconnectingRef: MutableRefObject<{ left: boolean; right: boolean }>;
+}
+
+export const useSftpSessionErrors = ({
+  getActivePane,
+  leftTabsRef,
+  rightTabsRef,
+  updateActiveTab,
+  sftpSessionsRef,
+  clearCacheForConnection,
+  navSeqRef,
+  lastConnectedHostRef,
+  reconnectingRef,
+}: UseSftpSessionErrorsParams) =>
+  useCallback(
+    (side: "left" | "right", _error: Error) => {
+      const pane = getActivePane(side);
+      const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
+
+      if (!pane || !sideTabs.activeTabId) return;
+
+      if (pane.connection) {
+        sftpSessionsRef.current.delete(pane.connection.id);
+        clearCacheForConnection(pane.connection.id);
+      }
+
+      navSeqRef.current[side] += 1;
+
+      const lastHost = lastConnectedHostRef.current[side];
+      if (lastHost && pane.files.length > 0 && !reconnectingRef.current[side]) {
+        reconnectingRef.current[side] = true;
+        updateActiveTab(side, (prev) => ({
+          ...prev,
+          reconnecting: true,
+          error: "sftp.error.connectionLostReconnecting",
+        }));
+      } else {
+        updateActiveTab(side, (prev) => ({
+          ...prev,
+          connection: null,
+          files: [],
+          loading: false,
+          reconnecting: false,
+          error: "sftp.error.sessionLost",
+          selectedFiles: new Set(),
+          filter: "",
+        }));
+      }
+    },
+    [
+      getActivePane,
+      leftTabsRef,
+      rightTabsRef,
+      updateActiveTab,
+      sftpSessionsRef,
+      clearCacheForConnection,
+      navSeqRef,
+      lastConnectedHostRef,
+      reconnectingRef,
+    ],
+  );

application/state/sftp/useSftpTabsState.ts

@@ -0,0 +1,247 @@
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { createEmptyPane, EMPTY_LEFT_PANE_ID, EMPTY_RIGHT_PANE_ID, SftpPane, SftpSideTabs } from "./types";
+import { logger } from "../../../lib/logger";
+
+export interface SftpTabsState {
+  leftTabs: SftpSideTabs;
+  rightTabs: SftpSideTabs;
+  leftTabsRef: React.MutableRefObject<SftpSideTabs>;
+  rightTabsRef: React.MutableRefObject<SftpSideTabs>;
+  setLeftTabs: React.Dispatch<React.SetStateAction<SftpSideTabs>>;
+  setRightTabs: React.Dispatch<React.SetStateAction<SftpSideTabs>>;
+  leftPane: SftpPane;
+  rightPane: SftpPane;
+  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;
+  addTab: (side: "left" | "right") => string;
+  closeTab: (side: "left" | "right", tabId: string) => void;
+  selectTab: (side: "left" | "right", tabId: string) => void;
+  reorderTabs: (
+    side: "left" | "right",
+    draggedId: string,
+    targetId: string,
+    position: "before" | "after",
+  ) => void;
+  moveTabToOtherSide: (fromSide: "left" | "right", tabId: string) => void;
+  getTabsInfo: (side: "left" | "right") => Array<{
+    id: string;
+    label: string;
+    isLocal: boolean;
+    hostId: string | null;
+  }>;
+  getActiveTabId: (side: "left" | "right") => string | null;
+}
+
+export const useSftpTabsState = (): SftpTabsState => {
+  const [leftTabs, setLeftTabs] = useState<SftpSideTabs>({
+    tabs: [],
+    activeTabId: null,
+  });
+  const [rightTabs, setRightTabs] = useState<SftpSideTabs>({
+    tabs: [],
+    activeTabId: null,
+  });
+
+  const leftTabsRef = useRef(leftTabs);
+  const rightTabsRef = useRef(rightTabs);
+  leftTabsRef.current = leftTabs;
+  rightTabsRef.current = rightTabs;
+
+  const getActivePane = useCallback((side: "left" | "right"): SftpPane | null => {
+    const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
+    if (!sideTabs.activeTabId) return null;
+    return sideTabs.tabs.find((t) => t.id === sideTabs.activeTabId) || null;
+  }, []);
+
+  const leftPane = useMemo(() => {
+    const pane = leftTabs.activeTabId
+      ? leftTabs.tabs.find((t) => t.id === leftTabs.activeTabId)
+      : null;
+    return pane || createEmptyPane(EMPTY_LEFT_PANE_ID);
+  }, [leftTabs]);
+
+  const rightPane = useMemo(() => {
+    const pane = rightTabs.activeTabId
+      ? rightTabs.tabs.find((t) => t.id === rightTabs.activeTabId)
+      : null;
+    return pane || createEmptyPane(EMPTY_RIGHT_PANE_ID);
+  }, [rightTabs]);
+
+  const updateTab = useCallback(
+    (side: "left" | "right", tabId: string, updater: (pane: SftpPane) => SftpPane) => {
+      const setTabs = side === "left" ? setLeftTabs : setRightTabs;
+      setTabs((prev) => ({
+        ...prev,
+        tabs: prev.tabs.map((t) => (t.id === tabId ? updater(t) : t)),
+      }));
+    },
+    [],
+  );
+
+  const updateActiveTab = useCallback(
+    (side: "left" | "right", updater: (pane: SftpPane) => SftpPane) => {
+      const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
+      if (!sideTabs.activeTabId) return;
+      updateTab(side, sideTabs.activeTabId, updater);
+    },
+    [updateTab],
+  );
+
+  const addTab = useCallback(
+    (side: "left" | "right") => {
+      const newPane = createEmptyPane();
+      const setTabs = side === "left" ? setLeftTabs : setRightTabs;
+      setTabs((prev) => ({
+        tabs: [...prev.tabs, newPane],
+        activeTabId: newPane.id,
+      }));
+      return newPane.id;
+    },
+    [],
+  );
+
+  const closeTab = useCallback(
+    (side: "left" | "right", tabId: string) => {
+      const setTabs = side === "left" ? setLeftTabs : setRightTabs;
+      setTabs((prev) => {
+        const tabIndex = prev.tabs.findIndex((t) => t.id === tabId);
+        if (tabIndex === -1) return prev;
+
+        let newActiveTabId: string | null = null;
+        if (prev.tabs.length > 1) {
+          if (prev.activeTabId === tabId) {
+            const nextIndex = tabIndex < prev.tabs.length - 1 ? tabIndex + 1 : tabIndex - 1;
+            newActiveTabId = prev.tabs[nextIndex]?.id || null;
+          } else {
+            newActiveTabId = prev.activeTabId;
+          }
+        }
+
+        return {
+          tabs: prev.tabs.filter((t) => t.id !== tabId),
+          activeTabId: newActiveTabId,
+        };
+      });
+    },
+    [],
+  );
+
+  const selectTab = useCallback(
+    (side: "left" | "right", tabId: string) => {
+      const setTabs = side === "left" ? setLeftTabs : setRightTabs;
+      setTabs((prev) => ({
+        ...prev,
+        activeTabId: tabId,
+      }));
+    },
+    [],
+  );
+
+  const reorderTabs = useCallback(
+    (
+      side: "left" | "right",
+      draggedId: string,
+      targetId: string,
+      position: "before" | "after",
+    ) => {
+      const setTabs = side === "left" ? setLeftTabs : setRightTabs;
+      setTabs((prev) => {
+        const tabs = [...prev.tabs];
+        const draggedIndex = tabs.findIndex((t) => t.id === draggedId);
+        const targetIndex = tabs.findIndex((t) => t.id === targetId);
+
+        if (draggedIndex === -1 || targetIndex === -1) return prev;
+
+        const [draggedTab] = tabs.splice(draggedIndex, 1);
+        const insertIndex = position === "before" ? targetIndex : targetIndex + 1;
+        const adjustedIndex = draggedIndex < targetIndex ? insertIndex - 1 : insertIndex;
+        tabs.splice(adjustedIndex, 0, draggedTab);
+
+        return { ...prev, tabs };
+      });
+    },
+    [],
+  );
+
+  const moveTabToOtherSide = useCallback(
+    (fromSide: "left" | "right", tabId: string) => {
+      const sourceTabs = fromSide === "left" ? leftTabsRef.current : rightTabsRef.current;
+      const setSourceTabs = fromSide === "left" ? setLeftTabs : setRightTabs;
+      const setTargetTabs = fromSide === "left" ? setRightTabs : setLeftTabs;
+
+      const tabToMove = sourceTabs.tabs.find((t) => t.id === tabId);
+      if (!tabToMove) return;
+
+      logger.info("[SFTP] Moving tab to other side", {
+        fromSide,
+        toSide: fromSide === "left" ? "right" : "left",
+        tabId,
+        hostLabel: tabToMove.connection?.hostLabel,
+      });
+
+      setSourceTabs((prev) => {
+        const newTabs = prev.tabs.filter((t) => t.id !== tabId);
+        let newActiveTabId: string | null = null;
+        if (newTabs.length > 0) {
+          if (prev.activeTabId === tabId) {
+            newActiveTabId = newTabs[0].id;
+          } else {
+            newActiveTabId = prev.activeTabId;
+          }
+        }
+        return { tabs: newTabs, activeTabId: newActiveTabId };
+      });
+
+      setTargetTabs((prev) => ({
+        tabs: [...prev.tabs, tabToMove],
+        activeTabId: tabToMove.id,
+      }));
+    },
+    [],
+  );
+
+  const DEFAULT_TAB_LABEL = "New Tab";
+
+  const getTabsInfo = useCallback(
+    (side: "left" | "right") => {
+      const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
+      return sideTabs.tabs.map((pane) => ({
+        id: pane.id,
+        label: pane.connection?.hostLabel || DEFAULT_TAB_LABEL,
+        isLocal: pane.connection?.isLocal || false,
+        hostId: pane.connection?.hostId || null,
+      }));
+    },
+    [],
+  );
+
+  const getActiveTabId = useCallback(
+    (side: "left" | "right") => {
+      const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
+      return sideTabs.activeTabId;
+    },
+    [],
+  );
+
+  return {
+    leftTabs,
+    rightTabs,
+    leftTabsRef,
+    rightTabsRef,
+    setLeftTabs,
+    setRightTabs,
+    leftPane,
+    rightPane,
+    getActivePane,
+    updateTab,
+    updateActiveTab,
+    addTab,
+    closeTab,
+    selectTab,
+    reorderTabs,
+    moveTabToOtherSide,
+    getTabsInfo,
+    getActiveTabId,
+  };
+};

application/state/sftp/useSftpTransfers.ts

@@ -0,0 +1,785 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  FileConflict,
+  SftpFileEntry,
+  SftpFilenameEncoding,
+  TransferDirection,
+  TransferStatus,
+  TransferTask,
+} from "../../../domain/models";
+import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
+import { logger } from "../../../lib/logger";
+import { SftpPane } from "./types";
+import { joinPath } from "./utils";
+
+interface UseSftpTransfersParams {
+  getActivePane: (side: "left" | "right") => SftpPane | null;
+  refresh: (side: "left" | "right") => Promise<void>;
+  sftpSessionsRef: React.MutableRefObject<Map<string, string>>;
+  listLocalFiles: (path: string) => Promise<SftpFileEntry[]>;
+  listRemoteFiles: (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => Promise<SftpFileEntry[]>;
+  handleSessionError: (side: "left" | "right", error: Error) => void;
+}
+
+interface UseSftpTransfersResult {
+  transfers: TransferTask[];
+  conflicts: FileConflict[];
+  activeTransfersCount: number;
+  startTransfer: (
+    sourceFiles: { name: string; isDirectory: boolean }[],
+    sourceSide: "left" | "right",
+    targetSide: "left" | "right",
+  ) => Promise<void>;
+  addExternalUpload: (task: TransferTask) => void;
+  updateExternalUpload: (taskId: string, updates: Partial<TransferTask>) => void;
+  cancelTransfer: (transferId: string) => Promise<void>;
+  retryTransfer: (transferId: string) => Promise<void>;
+  clearCompletedTransfers: () => void;
+  dismissTransfer: (transferId: string) => void;
+  resolveConflict: (conflictId: string, action: "replace" | "skip" | "duplicate") => Promise<void>;
+}
+
+export const useSftpTransfers = ({
+  getActivePane,
+  refresh,
+  sftpSessionsRef,
+  listLocalFiles,
+  listRemoteFiles,
+  handleSessionError,
+}: UseSftpTransfersParams): UseSftpTransfersResult => {
+  const [transfers, setTransfers] = useState<TransferTask[]>([]);
+  const [conflicts, setConflicts] = useState<FileConflict[]>([]);
+
+  const progressIntervalsRef = useRef<Map<string, NodeJS.Timeout>>(new Map());
+  // Track cancelled task IDs for checking during async operations
+  const cancelledTasksRef = useRef<Set<string>>(new Set());
+
+  useEffect(() => {
+    const intervalsRef = progressIntervalsRef.current;
+    return () => {
+      intervalsRef.forEach((interval) => {
+        clearInterval(interval);
+      });
+      intervalsRef.clear();
+    };
+  }, []);
+
+  const startProgressSimulation = useCallback(
+    (taskId: string, estimatedBytes: number) => {
+      const existing = progressIntervalsRef.current.get(taskId);
+      if (existing) clearInterval(existing);
+
+      const baseSpeed = Math.max(50000, Math.min(500000, estimatedBytes / 10));
+      const variability = 0.3;
+
+      let transferred = 0;
+      const interval = setInterval(() => {
+        const speedFactor = 1 + (Math.random() - 0.5) * variability;
+        const chunkSize = Math.floor(baseSpeed * speedFactor * 0.1);
+        transferred = Math.min(transferred + chunkSize, estimatedBytes);
+
+        setTransfers((prev) =>
+          prev.map((t) => {
+            if (t.id !== taskId || t.status !== "transferring") return t;
+            return {
+              ...t,
+              transferredBytes: transferred,
+              totalBytes: estimatedBytes,
+              speed: chunkSize * 10,
+            };
+          }),
+        );
+
+        if (transferred >= estimatedBytes * 0.95) {
+          clearInterval(interval);
+          progressIntervalsRef.current.delete(taskId);
+        }
+      }, 100);
+
+      progressIntervalsRef.current.set(taskId, interval);
+    },
+    [],
+  );
+
+  const stopProgressSimulation = useCallback((taskId: string) => {
+    const interval = progressIntervalsRef.current.get(taskId);
+    if (interval) {
+      clearInterval(interval);
+      progressIntervalsRef.current.delete(taskId);
+    }
+  }, []);
+
+  const transferFile = async (
+    task: TransferTask,
+    sourceSftpId: string | null,
+    targetSftpId: string | null,
+    sourceIsLocal: boolean,
+    targetIsLocal: boolean,
+    sourceEncoding: SftpFilenameEncoding,
+    targetEncoding: SftpFilenameEncoding,
+    rootTaskId: string, // The original top-level task ID for cancellation checking
+  ): Promise<void> => {
+    // Check if task or root task was cancelled before starting
+    if (cancelledTasksRef.current.has(task.id) || cancelledTasksRef.current.has(rootTaskId)) {
+      throw new Error("Transfer cancelled");
+    }
+
+    if (netcattyBridge.get()?.startStreamTransfer) {
+      return new Promise((resolve, reject) => {
+        const options = {
+          transferId: task.id,
+          sourcePath: task.sourcePath,
+          targetPath: task.targetPath,
+          sourceType: sourceIsLocal ? ("local" as const) : ("sftp" as const),
+          targetType: targetIsLocal ? ("local" as const) : ("sftp" as const),
+          sourceSftpId: sourceSftpId || undefined,
+          targetSftpId: targetSftpId || undefined,
+          totalBytes: task.totalBytes || undefined,
+          sourceEncoding: sourceIsLocal ? undefined : sourceEncoding,
+          targetEncoding: targetIsLocal ? undefined : targetEncoding,
+        };
+
+        const onProgress = (
+          transferred: number,
+          total: number,
+          speed: number,
+        ) => {
+          setTransfers((prev) =>
+            prev.map((t) => {
+              if (t.id !== task.id) return t;
+              if (t.status === "cancelled") return t;
+              return {
+                ...t,
+                transferredBytes: transferred,
+                totalBytes: total || t.totalBytes,
+                speed,
+              };
+            }),
+          );
+        };
+
+        const onComplete = () => {
+          resolve();
+        };
+
+        const onError = (error: string) => {
+          reject(new Error(error));
+        };
+
+        netcattyBridge.require().startStreamTransfer!(
+          options,
+          onProgress,
+          onComplete,
+          onError,
+        ).catch(reject);
+      });
+    }
+
+    let content: ArrayBuffer | string;
+
+    if (sourceIsLocal) {
+      content =
+        (await netcattyBridge.get()?.readLocalFile?.(task.sourcePath)) ||
+        new ArrayBuffer(0);
+    } else if (sourceSftpId) {
+      if (netcattyBridge.get()?.readSftpBinary) {
+        content = await netcattyBridge.get()!.readSftpBinary!(
+          sourceSftpId,
+          task.sourcePath,
+          sourceEncoding,
+        );
+      } else {
+        content =
+          (await netcattyBridge.get()?.readSftp(sourceSftpId, task.sourcePath, sourceEncoding)) || "";
+      }
+    } else {
+      throw new Error("No source connection");
+    }
+
+    if (targetIsLocal) {
+      if (content instanceof ArrayBuffer) {
+        await netcattyBridge.get()?.writeLocalFile?.(task.targetPath, content);
+      } else {
+        const encoder = new TextEncoder();
+        await netcattyBridge.get()?.writeLocalFile?.(
+          task.targetPath,
+          encoder.encode(content).buffer,
+        );
+      }
+    } else if (targetSftpId) {
+      if (content instanceof ArrayBuffer && netcattyBridge.get()?.writeSftpBinary) {
+        await netcattyBridge.get()!.writeSftpBinary!(
+          targetSftpId,
+          task.targetPath,
+          content,
+          targetEncoding,
+        );
+      } else {
+        const text =
+          content instanceof ArrayBuffer
+            ? new TextDecoder().decode(content)
+            : content;
+        await netcattyBridge.get()?.writeSftp(targetSftpId, task.targetPath, text, targetEncoding);
+      }
+    } else {
+      throw new Error("No target connection");
+    }
+  };
+
+  const transferDirectory = async (
+    task: TransferTask,
+    sourceSftpId: string | null,
+    targetSftpId: string | null,
+    sourceIsLocal: boolean,
+    targetIsLocal: boolean,
+    sourceEncoding: SftpFilenameEncoding,
+    targetEncoding: SftpFilenameEncoding,
+    rootTaskId: string, // The original top-level task ID for cancellation checking
+  ) => {
+    // Check if task or root task was cancelled before starting
+    if (cancelledTasksRef.current.has(task.id) || cancelledTasksRef.current.has(rootTaskId)) {
+      throw new Error("Transfer cancelled");
+    }
+
+    if (targetIsLocal) {
+      await netcattyBridge.get()?.mkdirLocal?.(task.targetPath);
+    } else if (targetSftpId) {
+      await netcattyBridge.get()?.mkdirSftp(targetSftpId, task.targetPath, targetEncoding);
+    }
+
+    let files: SftpFileEntry[];
+    if (sourceIsLocal) {
+      files = await listLocalFiles(task.sourcePath);
+    } else if (sourceSftpId) {
+      files = await listRemoteFiles(sourceSftpId, task.sourcePath, sourceEncoding);
+    } else {
+      throw new Error("No source connection");
+    }
+
+    for (const file of files) {
+      if (file.name === "..") continue;
+
+      // Check if root task was cancelled during iteration
+      if (cancelledTasksRef.current.has(task.id) || cancelledTasksRef.current.has(rootTaskId)) {
+        throw new Error("Transfer cancelled");
+      }
+
+      const childTask: TransferTask = {
+        ...task,
+        id: crypto.randomUUID(),
+        fileName: file.name,
+        sourcePath: joinPath(task.sourcePath, file.name),
+        targetPath: joinPath(task.targetPath, file.name),
+        isDirectory: file.type === "directory",
+        parentTaskId: task.id,
+      };
+
+      if (file.type === "directory") {
+        await transferDirectory(
+          childTask,
+          sourceSftpId,
+          targetSftpId,
+          sourceIsLocal,
+          targetIsLocal,
+          sourceEncoding,
+          targetEncoding,
+          rootTaskId,
+        );
+      } else {
+        await transferFile(
+          childTask,
+          sourceSftpId,
+          targetSftpId,
+          sourceIsLocal,
+          targetIsLocal,
+          sourceEncoding,
+          targetEncoding,
+          rootTaskId,
+        );
+      }
+    }
+  };
+
+  const processTransfer = async (
+    task: TransferTask,
+    sourcePane: SftpPane,
+    targetPane: SftpPane,
+    targetSide: "left" | "right",
+  ) => {
+    const updateTask = (updates: Partial<TransferTask>) => {
+      setTransfers((prev) =>
+        prev.map((t) => (t.id === task.id ? { ...t, ...updates } : t)),
+      );
+    };
+
+    // Initialize encoding early to avoid temporal dead zone issues
+    const sourceEncoding: SftpFilenameEncoding = sourcePane.connection?.isLocal
+      ? "auto"
+      : sourcePane.filenameEncoding || "auto";
+    const targetEncoding: SftpFilenameEncoding = targetPane.connection?.isLocal
+      ? "auto"
+      : targetPane.filenameEncoding || "auto";
+
+    let actualFileSize = task.totalBytes;
+    if (!task.isDirectory && actualFileSize === 0) {
+      try {
+        const sourceSftpId = sourcePane.connection?.isLocal
+          ? null
+          : sftpSessionsRef.current.get(sourcePane.connection!.id);
+
+        if (sourcePane.connection?.isLocal) {
+          const stat = await netcattyBridge.get()?.statLocal?.(task.sourcePath);
+          if (stat) actualFileSize = stat.size;
+        } else if (sourceSftpId) {
+          const stat = await netcattyBridge.get()?.statSftp?.(
+            sourceSftpId,
+            task.sourcePath,
+            sourceEncoding,
+          );
+          if (stat) actualFileSize = stat.size;
+        }
+      } catch {
+        // Ignore stat errors
+      }
+    }
+
+    const estimatedSize =
+      actualFileSize > 0
+        ? actualFileSize
+        : task.isDirectory
+          ? 1024 * 1024
+          : 256 * 1024;
+
+    const hasStreamingTransfer = !!netcattyBridge.get()?.startStreamTransfer;
+
+    updateTask({
+      status: "transferring",
+      totalBytes: estimatedSize,
+      transferredBytes: 0,
+      startTime: Date.now(),
+    });
+
+    const sourceSftpId = sourcePane.connection?.isLocal
+      ? null
+      : sftpSessionsRef.current.get(sourcePane.connection!.id);
+    const targetSftpId = targetPane.connection?.isLocal
+      ? null
+      : sftpSessionsRef.current.get(targetPane.connection!.id);
+
+    if (!sourcePane.connection?.isLocal && !sourceSftpId) {
+      const sourceSide = targetSide === "left" ? "right" : "left";
+      handleSessionError(sourceSide, new Error("Source SFTP session lost"));
+      throw new Error("Source SFTP session not found");
+    }
+
+    if (!targetPane.connection?.isLocal && !targetSftpId) {
+      handleSessionError(targetSide, new Error("Target SFTP session lost"));
+      throw new Error("Target SFTP session not found");
+    }
+
+    let useSimulatedProgress = false;
+    if (!hasStreamingTransfer || task.isDirectory) {
+      useSimulatedProgress = true;
+      startProgressSimulation(task.id, estimatedSize);
+    }
+
+    try {
+      if (!task.skipConflictCheck && !task.isDirectory && targetPane.connection) {
+        let targetExists = false;
+        let existingStat: { size: number; mtime: number } | null = null;
+        let sourceStat: { size: number; mtime: number } | null = null;
+
+        try {
+          if (sourcePane.connection.isLocal) {
+            const stat = await netcattyBridge.get()?.statLocal?.(task.sourcePath);
+            if (stat) {
+              sourceStat = {
+                size: stat.size,
+                mtime: stat.lastModified || Date.now(),
+              };
+            }
+          } else if (sourceSftpId) {
+            const stat = await netcattyBridge.get()?.statSftp?.(
+              sourceSftpId,
+              task.sourcePath,
+              sourceEncoding,
+            );
+            if (stat) {
+              sourceStat = {
+                size: stat.size,
+                mtime: stat.lastModified || Date.now(),
+              };
+            }
+          }
+        } catch {
+          // ignore
+        }
+
+        try {
+          if (targetPane.connection.isLocal) {
+            const stat = await netcattyBridge.get()?.statLocal?.(task.targetPath);
+            if (stat) {
+              targetExists = true;
+              existingStat = {
+                size: stat.size,
+                mtime: stat.lastModified || Date.now(),
+              };
+            }
+          } else if (targetSftpId) {
+            const stat = await netcattyBridge.get()?.statSftp?.(
+              targetSftpId,
+              task.targetPath,
+              targetEncoding,
+            );
+            if (stat) {
+              targetExists = true;
+              existingStat = {
+                size: stat.size,
+                mtime: stat.lastModified || Date.now(),
+              };
+            }
+          }
+        } catch {
+          // ignore
+        }
+
+        if (targetExists && existingStat) {
+          stopProgressSimulation(task.id);
+
+          const newConflict: FileConflict = {
+            transferId: task.id,
+            fileName: task.fileName,
+            sourcePath: task.sourcePath,
+            targetPath: task.targetPath,
+            existingSize: existingStat.size,
+            newSize: sourceStat?.size || estimatedSize,
+            existingModified: existingStat.mtime,
+            newModified: sourceStat?.mtime || Date.now(),
+          };
+          setConflicts((prev) => [...prev, newConflict]);
+          updateTask({
+            status: "pending",
+            totalBytes: sourceStat?.size || estimatedSize,
+          });
+          return;
+        }
+      }
+
+      if (task.isDirectory) {
+        await transferDirectory(
+          task,
+          sourceSftpId,
+          targetSftpId,
+          sourcePane.connection!.isLocal,
+          targetPane.connection!.isLocal,
+          sourceEncoding,
+          targetEncoding,
+          task.id, // rootTaskId - this is the top-level task
+        );
+      } else {
+        await transferFile(
+          task,
+          sourceSftpId,
+          targetSftpId,
+          sourcePane.connection!.isLocal,
+          targetPane.connection!.isLocal,
+          sourceEncoding,
+          targetEncoding,
+          task.id, // rootTaskId - this is the top-level task
+        );
+      }
+
+      if (useSimulatedProgress) {
+        stopProgressSimulation(task.id);
+      }
+
+      setTransfers((prev) =>
+        prev.map((t) => {
+          if (t.id !== task.id) return t;
+          return {
+            ...t,
+            status: "completed" as TransferStatus,
+            endTime: Date.now(),
+            transferredBytes: t.totalBytes,
+            speed: 0,
+          };
+        }),
+      );
+
+      await refresh(targetSide);
+    } catch (err) {
+      if (useSimulatedProgress) {
+        stopProgressSimulation(task.id);
+      }
+
+      // Check if this was a cancellation
+      const isCancelled = cancelledTasksRef.current.has(task.id) ||
+        (err instanceof Error && err.message === "Transfer cancelled");
+
+      if (isCancelled) {
+        // Don't update status - cancelTransfer already set it to cancelled
+        return;
+      }
+
+      updateTask({
+        status: "failed",
+        error: err instanceof Error ? err.message : "Transfer failed",
+        endTime: Date.now(),
+        speed: 0,
+      });
+    }
+  };
+
+  const startTransfer = useCallback(
+    async (
+      sourceFiles: { name: string; isDirectory: boolean }[],
+      sourceSide: "left" | "right",
+      targetSide: "left" | "right",
+    ) => {
+      const sourcePane = getActivePane(sourceSide);
+      const targetPane = getActivePane(targetSide);
+
+      if (!sourcePane?.connection || !targetPane?.connection) return;
+
+      const sourceEncoding: SftpFilenameEncoding = sourcePane.connection.isLocal
+        ? "auto"
+        : sourcePane.filenameEncoding || "auto";
+
+      const sourcePath = sourcePane.connection.currentPath;
+      const targetPath = targetPane.connection.currentPath;
+
+      const sourceSftpId = sourcePane.connection.isLocal
+        ? null
+        : sftpSessionsRef.current.get(sourcePane.connection.id);
+
+      const newTasks: TransferTask[] = [];
+
+      for (const file of sourceFiles) {
+        const direction: TransferDirection =
+          sourcePane.connection!.isLocal && !targetPane.connection!.isLocal
+            ? "upload"
+            : !sourcePane.connection!.isLocal && targetPane.connection!.isLocal
+              ? "download"
+              : "remote-to-remote";
+
+        let fileSize = 0;
+        if (!file.isDirectory) {
+          try {
+            const fullPath = joinPath(sourcePath, file.name);
+            if (sourcePane.connection!.isLocal) {
+              const stat = await netcattyBridge.get()?.statLocal?.(fullPath);
+              if (stat) fileSize = stat.size;
+            } else if (sourceSftpId) {
+            const stat = await netcattyBridge.get()?.statSftp?.(
+              sourceSftpId,
+              fullPath,
+              sourceEncoding,
+            );
+              if (stat) fileSize = stat.size;
+            }
+          } catch {
+            // ignore
+          }
+        }
+
+        newTasks.push({
+          id: crypto.randomUUID(),
+          fileName: file.name,
+          sourcePath: joinPath(sourcePath, file.name),
+          targetPath: joinPath(targetPath, file.name),
+          sourceConnectionId: sourcePane.connection!.id,
+          targetConnectionId: targetPane.connection!.id,
+          direction,
+          status: "pending" as TransferStatus,
+          totalBytes: fileSize,
+          transferredBytes: 0,
+          speed: 0,
+          startTime: Date.now(),
+          isDirectory: file.isDirectory,
+        });
+      }
+
+      setTransfers((prev) => [...prev, ...newTasks]);
+
+      for (const task of newTasks) {
+        await processTransfer(task, sourcePane, targetPane, targetSide);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getActivePane, sftpSessionsRef],
+  );
+
+  const cancelTransfer = useCallback(
+    async (transferId: string) => {
+      // Add to cancelled set so async operations can check
+      cancelledTasksRef.current.add(transferId);
+
+      stopProgressSimulation(transferId);
+
+      setTransfers((prev) =>
+        prev.map((t) =>
+          t.id === transferId
+            ? {
+              ...t,
+              status: "cancelled" as TransferStatus,
+              endTime: Date.now(),
+            }
+            : t,
+        ),
+      );
+
+      setConflicts((prev) => prev.filter((c) => c.transferId !== transferId));
+
+      if (netcattyBridge.get()?.cancelTransfer) {
+        try {
+          await netcattyBridge.get()!.cancelTransfer!(transferId);
+        } catch (err) {
+          logger.warn("Failed to cancel transfer at backend:", err);
+        }
+      }
+
+      // Clean up cancelled task ID after a delay to ensure all async ops see it
+      setTimeout(() => {
+        cancelledTasksRef.current.delete(transferId);
+      }, 5000);
+    },
+    [stopProgressSimulation],
+  );
+
+  const retryTransfer = useCallback(
+    async (transferId: string) => {
+      const task = transfers.find((t) => t.id === transferId);
+      if (!task) return;
+
+      const sourceSide = task.sourceConnectionId.startsWith("left") ? "left" : "right";
+      const targetSide = task.targetConnectionId.startsWith("left") ? "left" : "right";
+      const sourcePane = getActivePane(sourceSide as "left" | "right");
+      const targetPane = getActivePane(targetSide as "left" | "right");
+
+      if (sourcePane?.connection && targetPane?.connection) {
+        setTransfers((prev) =>
+          prev.map((t) =>
+            t.id === transferId
+              ? { ...t, status: "pending" as TransferStatus, error: undefined }
+              : t,
+          ),
+        );
+        await processTransfer(task, sourcePane, targetPane, targetSide);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- processTransfer is defined inline
+    [transfers, getActivePane],
+  );
+
+  const clearCompletedTransfers = useCallback(() => {
+    setTransfers((prev) =>
+      prev.filter((t) => t.status !== "completed" && t.status !== "cancelled"),
+    );
+  }, []);
+
+  const dismissTransfer = useCallback((transferId: string) => {
+    setTransfers((prev) => prev.filter((t) => t.id !== transferId));
+  }, []);
+
+  const addExternalUpload = useCallback((task: TransferTask) => {
+    // Filter out any pending scanning tasks before adding the new task.
+    // This ensures that even if dismissExternalUpload's state update hasn't been applied yet
+    // (due to React state batching), the scanning placeholder will still be removed.
+    setTransfers((prev) => [
+      ...prev.filter(t => !(t.status === "pending" && t.fileName === "Scanning files...")),
+      task
+    ]);
+  }, []);
+
+  const updateExternalUpload = useCallback((taskId: string, updates: Partial<TransferTask>) => {
+    setTransfers((prev) =>
+      prev.map((t) => (t.id === taskId ? { ...t, ...updates } : t)),
+    );
+  }, []);
+
+  const resolveConflict = useCallback(
+    async (conflictId: string, action: "replace" | "skip" | "duplicate") => {
+      const conflict = conflicts.find((c) => c.transferId === conflictId);
+      if (!conflict) return;
+
+      setConflicts((prev) => prev.filter((c) => c.transferId !== conflictId));
+
+      const task = transfers.find((t) => t.id === conflictId);
+      if (!task) return;
+
+      if (action === "skip") {
+        setTransfers((prev) =>
+          prev.map((t) =>
+            t.id === conflictId
+              ? { ...t, status: "cancelled" as TransferStatus }
+              : t,
+          ),
+        );
+        return;
+      }
+
+      let updatedTask = { ...task };
+
+      if (action === "duplicate") {
+        const ext = task.fileName.includes(".")
+          ? "." + task.fileName.split(".").pop()
+          : "";
+        const baseName = task.fileName.includes(".")
+          ? task.fileName.slice(0, task.fileName.lastIndexOf("."))
+          : task.fileName;
+        const newName = `${baseName} (copy)${ext}`;
+        const newTargetPath = task.targetPath.replace(task.fileName, newName);
+        updatedTask = {
+          ...task,
+          fileName: newName,
+          targetPath: newTargetPath,
+          skipConflictCheck: true,
+        };
+      } else if (action === "replace") {
+        updatedTask = {
+          ...task,
+          skipConflictCheck: true,
+        };
+      }
+
+      setTransfers((prev) =>
+        prev.map((t) =>
+          t.id === conflictId
+            ? { ...updatedTask, status: "pending" as TransferStatus }
+            : t,
+        ),
+      );
+
+      const sourceSide = updatedTask.sourceConnectionId.startsWith("left") ? "left" : "right";
+      const targetSide = updatedTask.targetConnectionId.startsWith("left") ? "left" : "right";
+      const sourcePane = getActivePane(sourceSide as "left" | "right");
+      const targetPane = getActivePane(targetSide as "left" | "right");
+
+      if (sourcePane?.connection && targetPane?.connection) {
+        setTimeout(async () => {
+          await processTransfer(updatedTask, sourcePane, targetPane, targetSide);
+        }, 100);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- processTransfer is defined inline
+    [conflicts, transfers, getActivePane],
+  );
+
+  const activeTransfersCount = useMemo(() => transfers.filter(
+    (t) => t.status === "pending" || t.status === "transferring",
+  ).length, [transfers]);
+
+  return {
+    transfers,
+    conflicts,
+    activeTransfersCount,
+    startTransfer,
+    addExternalUpload,
+    updateExternalUpload,
+    cancelTransfer,
+    retryTransfer,
+    clearCompletedTransfers,
+    dismissTransfer,
+    resolveConflict,
+  };
+};

application/state/sftp/utils.ts

@@ -0,0 +1,94 @@
+import { SftpFileEntry } from "../../../domain/models";
+
+export const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return "--";
+  const units = ["Bytes", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  const size = bytes / Math.pow(1024, i);
+  return `${size.toFixed(i === 0 ? 0 : 2)} ${units[i]}`;
+};
+
+export const formatDate = (timestamp: number): string => {
+  if (!timestamp) return "--";
+  const date = new Date(timestamp);
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+};
+
+export const getFileExtension = (name: string): string => {
+  if (name === "..") return "folder";
+  const ext = name.split(".").pop()?.toLowerCase();
+  return ext || "file";
+};
+
+// Check if an entry is navigable like a directory (directories or symlinks pointing to directories)
+export const isNavigableDirectory = (entry: SftpFileEntry): boolean => {
+  return entry.type === "directory" || (entry.type === "symlink" && entry.linkTarget === "directory");
+};
+
+// Check if path is Windows-style
+export const isWindowsPath = (path: string): boolean => /^[A-Za-z]:/.test(path);
+
+const normalizeWindowsRoot = (path: string): string => {
+  const normalized = path.replace(/\//g, "\\");
+  if (/^[A-Za-z]:\\$/.test(normalized)) return normalized;
+  if (/^[A-Za-z]:$/.test(normalized)) return `${normalized}\\`;
+  return normalized;
+};
+
+export const isWindowsRoot = (path: string): boolean => {
+  if (!isWindowsPath(path)) return false;
+  return /^[A-Za-z]:\\?$/.test(path.replace(/\//g, "\\"));
+};
+
+export const joinPath = (base: string, name: string): string => {
+  if (isWindowsPath(base)) {
+    const normalizedBase = normalizeWindowsRoot(base).replace(/[\\/]+$/, "");
+    return `${normalizedBase}\\${name}`;
+  }
+  if (base === "/") return `/${name}`;
+  return `${base}/${name}`;
+};
+
+export const getParentPath = (path: string): string => {
+  console.log("[SFTP getParentPath] input", { path, isWindows: isWindowsPath(path) });
+
+  if (isWindowsPath(path)) {
+    const normalized = normalizeWindowsRoot(path).replace(/[\\]+$/, "");
+    const drive = normalized.slice(0, 2);
+    if (/^[A-Za-z]:$/.test(normalized) || /^[A-Za-z]:\\$/.test(normalized)) {
+      console.log("[SFTP getParentPath] Windows root, returning", { result: `${drive}\\` });
+      return `${drive}\\`;
+    }
+    const rest = normalized.slice(2).replace(/^[\\]+/, "");
+    const parts = rest ? rest.split(/[\\]+/).filter(Boolean) : [];
+    if (parts.length <= 1) {
+      console.log("[SFTP getParentPath] Windows near root, returning", { result: `${drive}\\` });
+      return `${drive}\\`;
+    }
+    parts.pop();
+    const result = `${drive}\\${parts.join("\\")}`;
+    console.log("[SFTP getParentPath] Windows result", { result });
+    return result;
+  }
+  if (path === "/") {
+    console.log("[SFTP getParentPath] Unix root, returning /");
+    return "/";
+  }
+  const parts = path.split("/").filter(Boolean);
+  console.log("[SFTP getParentPath] Unix parts before pop", { parts: [...parts] });
+  parts.pop();
+  const result = parts.length ? `/${parts.join("/")}` : "/";
+  console.log("[SFTP getParentPath] Unix result", { result, partsAfterPop: parts });
+  return result;
+};
+
+export const getFileName = (path: string): string => {
+  const parts = path.split(/[\\/]/).filter(Boolean);
+  return parts[parts.length - 1] || "";
+};

application/state/uiFontStore.ts

@@ -0,0 +1,207 @@
+import { useSyncExternalStore } from 'react';
+import { UI_FONTS, withUiCjkFallback, type UIFont } from '../../infrastructure/config/uiFonts';
+
+/**
+ * UI Font Store - singleton pattern using useSyncExternalStore
+ * Fetches system fonts and combines with bundled fonts
+ */
+type Listener = () => void;
+
+interface UIFontStoreState {
+  availableFonts: UIFont[];
+  isLoading: boolean;
+  isLoaded: boolean;
+  error: string | null;
+}
+
+/**
+ * Type definition for Local Font Access API
+ */
+interface LocalFontData {
+  family: string;
+}
+
+class UIFontStore {
+  private state: UIFontStoreState = {
+    availableFonts: UI_FONTS,
+    isLoading: false,
+    isLoaded: false,
+    error: null,
+  };
+  private listeners = new Set<Listener>();
+
+  getAvailableFonts = (): UIFont[] => this.state.availableFonts;
+  getIsLoading = (): boolean => this.state.isLoading;
+  getIsLoaded = (): boolean => this.state.isLoaded;
+
+  private notify = () => {
+    Promise.resolve().then(() => {
+      this.listeners.forEach(listener => listener());
+    });
+  };
+
+  private setState = (partial: Partial<UIFontStoreState>) => {
+    this.state = { ...this.state, ...partial };
+    this.notify();
+  };
+
+  subscribe = (listener: Listener): (() => void) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+
+  initialize = async (): Promise<void> => {
+    if (this.state.isLoaded || this.state.isLoading) {
+      return;
+    }
+
+    this.setState({ isLoading: true, error: null });
+
+    try {
+      const localFonts = await this.getLocalFonts();
+
+      // Use a Map to deduplicate by normalized font name
+      const fontMap = new Map<string, UIFont>();
+
+      // Add bundled fonts first (they have priority)
+      UI_FONTS.forEach(font => fontMap.set(font.id, font));
+
+      // Add local fonts with a distinct ID namespace
+      localFonts.forEach(font => {
+        const localId = `local-${font.id}`;
+        // Skip if a bundled font with similar name exists
+        if (!fontMap.has(font.id)) {
+          fontMap.set(localId, { ...font, id: localId });
+        }
+      });
+
+      this.setState({
+        availableFonts: Array.from(fontMap.values()),
+        isLoading: false,
+        isLoaded: true,
+      });
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to load local fonts';
+      console.warn('Failed to fetch local UI fonts, using defaults:', error);
+      this.setState({
+        availableFonts: UI_FONTS,
+        isLoading: false,
+        isLoaded: true,
+        error: errorMessage,
+      });
+    }
+  };
+
+  private async getLocalFonts(): Promise<UIFont[]> {
+    if (typeof window === 'undefined' || !('queryLocalFonts' in window)) {
+      return [];
+    }
+
+    try {
+      const queryLocalFonts = (window as unknown as { queryLocalFonts: () => Promise<LocalFontData[]> }).queryLocalFonts;
+      const fonts = await queryLocalFonts();
+
+      // Deduplicate by family name
+      const uniqueFamilies = new Set<string>();
+      const dedupedFonts = fonts.filter(f => {
+        if (uniqueFamilies.has(f.family)) return false;
+        uniqueFamilies.add(f.family);
+        return true;
+      });
+
+      // Map to UIFont structure
+      return dedupedFonts.map(f => ({
+        id: f.family.toLowerCase().replace(/\s+/g, '-'),
+        name: f.family,
+        family: withUiCjkFallback(`"${f.family}", system-ui`),
+      }));
+    } catch (error) {
+      console.warn('Failed to query local fonts:', error);
+      return [];
+    }
+  }
+
+  getFontById = (fontId: string): UIFont => {
+    const fonts = this.state.availableFonts;
+    const found = fonts.find(f => f.id === fontId);
+    if (found) return found;
+
+    // For local fonts that haven't been loaded yet, construct a fallback
+    // This handles the case when main window receives a local font ID before fonts are loaded
+    if (fontId.startsWith('local-')) {
+      const fontName = fontId
+        .replace(/^local-/, '')
+        .split('-')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+      return {
+        id: fontId,
+        name: fontName,
+        family: withUiCjkFallback(`"${fontName}", system-ui`),
+      };
+    }
+
+    return fonts[0] || UI_FONTS[0];
+  };
+}
+
+// Singleton instance
+export const uiFontStore = new UIFontStore();
+
+/**
+ * Get available UI fonts - triggers initialization on first use
+ */
+export const useAvailableUIFonts = (): UIFont[] => {
+  if (!uiFontStore.getIsLoaded() && !uiFontStore.getIsLoading()) {
+    uiFontStore.initialize();
+  }
+
+  return useSyncExternalStore(
+    uiFontStore.subscribe,
+    uiFontStore.getAvailableFonts
+  );
+};
+
+/**
+ * Get UI font loading state
+ */
+export const useUIFontsLoading = (): boolean => {
+  return useSyncExternalStore(
+    uiFontStore.subscribe,
+    uiFontStore.getIsLoading
+  );
+};
+
+/**
+ * Get UI font loaded state
+ */
+export const useUIFontsLoaded = (): boolean => {
+  return useSyncExternalStore(
+    uiFontStore.subscribe,
+    uiFontStore.getIsLoaded
+  );
+};
+
+/**
+ * Get UI font by ID with fallback
+ */
+export const useUIFontById = (fontId: string): UIFont => {
+  const fonts = useAvailableUIFonts();
+  return fonts.find(f => f.id === fontId) || fonts[0] || UI_FONTS[0];
+};
+
+/**
+ * Check if a font ID is valid
+ */
+export const isValidUiFontId = (fontId: string): boolean => {
+  // Local fonts are always considered valid (they start with 'local-')
+  if (fontId.startsWith('local-')) return true;
+  return uiFontStore.getAvailableFonts().some(f => f.id === fontId);
+};
+
+/**
+ * Initialize UI fonts eagerly
+ */
+export const initializeUIFonts = (): void => {
+  uiFontStore.initialize();
+};

application/state/useApplicationBackend.ts

@@ -7,6 +7,12 @@ export type ApplicationInfo = {
   platform: string;
 };
 
+export type SshAgentStatus = {
+  running: boolean;
+  startupType: string | null;
+  error: string | null;
+};
+
 export const useApplicationBackend = () => {
   const openExternal = useCallback(async (url: string) => {
     try {
@@ -27,6 +33,12 @@ export const useApplicationBackend = () => {
     return info ?? null;
   }, []);
 
-  return { openExternal, getApplicationInfo };
+  const checkSshAgent = useCallback(async (): Promise<SshAgentStatus | null> => {
+    const bridge = netcattyBridge.get();
+    const status = await bridge?.checkSshAgent?.();
+    return status ?? null;
+  }, []);
+
+  return { openExternal, getApplicationInfo, checkSshAgent };
 };
 

application/state/usePortForwardingAutoStart.ts

@@ -0,0 +1,139 @@
+/**
+ * Hook for auto-starting port forwarding rules on app launch.
+ * This should be used at the App level to ensure auto-start happens
+ * when the application starts, not when the user navigates to the port forwarding page.
+ */
+import { useEffect, useRef } from "react";
+import { Host, PortForwardingRule } from "../../domain/models";
+import { STORAGE_KEY_PORT_FORWARDING } from "../../infrastructure/config/storageKeys";
+import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
+import {
+  getActiveConnection,
+  setReconnectCallback,
+  startPortForward,
+  syncWithBackend,
+} from "../../infrastructure/services/portForwardingService";
+import { logger } from "../../lib/logger";
+
+export interface UsePortForwardingAutoStartOptions {
+  hosts: Host[];
+  keys: { id: string; privateKey: string }[];
+}
+
+/**
+ * Auto-starts port forwarding rules that have autoStart enabled.
+ * This hook should be called at the App level to run on app launch.
+ */
+export const usePortForwardingAutoStart = ({
+  hosts,
+  keys,
+}: UsePortForwardingAutoStartOptions): void => {
+  const autoStartExecutedRef = useRef(false);
+  const hostsRef = useRef<Host[]>(hosts);
+  const keysRef = useRef<{ id: string; privateKey: string }[]>(keys);
+
+  // Keep refs in sync
+  useEffect(() => {
+    hostsRef.current = hosts;
+  }, [hosts]);
+
+  useEffect(() => {
+    keysRef.current = keys;
+  }, [keys]);
+
+  // Set up the reconnect callback
+  useEffect(() => {
+    const handleReconnect = async (
+      ruleId: string,
+      onStatusChange: (status: PortForwardingRule["status"], error?: string) => void,
+    ) => {
+      // Load the current rules from storage
+      const rules = localStorageAdapter.read<PortForwardingRule[]>(
+        STORAGE_KEY_PORT_FORWARDING,
+      ) ?? [];
+      
+      const rule = rules.find((r) => r.id === ruleId);
+      if (!rule || !rule.hostId) {
+        return { success: false, error: "Rule or host not found" };
+      }
+
+      const host = hostsRef.current.find((h) => h.id === rule.hostId);
+      if (!host) {
+        return { success: false, error: "Host not found" };
+      }
+
+      return startPortForward(rule, host, keysRef.current, onStatusChange, true);
+    };
+
+    setReconnectCallback(handleReconnect);
+    return () => {
+      setReconnectCallback(null);
+    };
+  }, []);
+
+  // Auto-start rules on app launch
+  useEffect(() => {
+    if (autoStartExecutedRef.current) return;
+    if (hosts.length === 0) return;
+
+    // Mark as executed immediately to prevent duplicate runs
+    // (React StrictMode or dependency changes could cause re-runs)
+    autoStartExecutedRef.current = true;
+
+    const runAutoStart = async () => {
+      // First sync with backend to get any active tunnels
+      await syncWithBackend();
+
+      // Load rules from storage
+      const rules = localStorageAdapter.read<PortForwardingRule[]>(
+        STORAGE_KEY_PORT_FORWARDING,
+      ) ?? [];
+
+      // Only start rules that are not already active
+      const autoStartRules = rules.filter((r) => {
+        if (!r.autoStart || !r.hostId) return false;
+        // Check if there's an active connection for this rule
+        const conn = getActiveConnection(r.id);
+        // Only start if not already connecting or active
+        return !conn || conn.status === 'inactive' || conn.status === 'error';
+      });
+
+      if (autoStartRules.length === 0) return;
+      logger.info(`[PortForwardingAutoStart] Starting ${autoStartRules.length} auto-start rules`);
+
+      // Start each auto-start rule
+      for (const rule of autoStartRules) {
+        const host = hosts.find((h) => h.id === rule.hostId);
+        if (host) {
+          void startPortForward(
+            rule,
+            host,
+            keys,
+            (status, error) => {
+              // Update the rule status in storage
+              const currentRules = localStorageAdapter.read<PortForwardingRule[]>(
+                STORAGE_KEY_PORT_FORWARDING,
+              ) ?? [];
+              
+              const updatedRules = currentRules.map((r) =>
+                r.id === rule.id
+                  ? {
+                      ...r,
+                      status,
+                      error,
+                      lastUsedAt: status === "active" ? Date.now() : r.lastUsedAt,
+                    }
+                  : r,
+              );
+              
+              localStorageAdapter.write(STORAGE_KEY_PORT_FORWARDING, updatedRules);
+            },
+            true, // Enable reconnect for auto-start rules
+          );
+        }
+      }
+    };
+
+    void runAutoStart();
+  }, [hosts, keys]);
+};

application/state/usePortForwardingState.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Host, PortForwardingRule } from "../../domain/models";
 import {
   STORAGE_KEY_PF_PREFER_FORM_MODE,
@@ -7,10 +7,12 @@ import {
 } from "../../infrastructure/config/storageKeys";
 import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
 import {
+  clearReconnectTimer,
   getActiveConnection,
   getActiveRuleIds,
   startPortForward,
   stopPortForward,
+  syncWithBackend,
 } from "../../infrastructure/services/portForwardingService";
 import { useStoredViewMode, ViewMode } from "./useStoredViewMode";
 
@@ -50,6 +52,7 @@ export interface UsePortForwardingStateResult {
     host: Host,
     keys: { id: string; privateKey: string }[],
     onStatusChange?: (status: PortForwardingRule["status"], error?: string) => void,
+    enableReconnect?: boolean,
   ) => Promise<{ success: boolean; error?: string }>;
   stopTunnel: (
     ruleId: string,
@@ -73,30 +76,43 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
     return localStorageAdapter.readBoolean(STORAGE_KEY_PF_PREFER_FORM_MODE) ?? false;
   });
 
+  // Track if sync has been executed for this component instance
+  const syncExecutedRef = useRef(false);
+
   const setPreferFormMode = useCallback((prefer: boolean) => {
     setPreferFormModeState(prefer);
     localStorageAdapter.writeBoolean(STORAGE_KEY_PF_PREFER_FORM_MODE, prefer);
   }, []);
 
-  // Load rules from storage on mount
+  // Load rules from storage on mount and sync with backend
   useEffect(() => {
-    const saved = localStorageAdapter.read<PortForwardingRule[]>(
-      STORAGE_KEY_PORT_FORWARDING,
-    );
-    if (saved && Array.isArray(saved)) {
-      // Sync status with active connections in the service layer
-      const _activeRuleIds = getActiveRuleIds();
-      const withSyncedStatus = saved.map((r) => {
-        const conn = getActiveConnection(r.id);
-        if (conn) {
-          // This rule has an active connection, preserve its status
-          return { ...r, status: conn.status, error: conn.error };
-        }
-        // No active connection, reset to inactive
-        return { ...r, status: "inactive" as const, error: undefined };
-      });
-      setRules(withSyncedStatus);
-    }
+    const loadAndSync = async () => {
+      // Only sync once per component instance (prevents duplicate calls from React StrictMode)
+      if (!syncExecutedRef.current) {
+        syncExecutedRef.current = true;
+        await syncWithBackend();
+      }
+
+      const saved = localStorageAdapter.read<PortForwardingRule[]>(
+        STORAGE_KEY_PORT_FORWARDING,
+      );
+      if (saved && Array.isArray(saved)) {
+        // Sync status with active connections in the service layer
+        const _activeRuleIds = getActiveRuleIds();
+        const withSyncedStatus = saved.map((r) => {
+          const conn = getActiveConnection(r.id);
+          if (conn) {
+            // This rule has an active connection, preserve its status
+            return { ...r, status: conn.status, error: conn.error };
+          }
+          // No active connection, reset to inactive
+          return { ...r, status: "inactive" as const, error: undefined };
+        });
+        setRules(withSyncedStatus);
+      }
+    };
+    
+    void loadAndSync();
   }, []);
 
   // Persist rules to storage whenever they change
@@ -204,11 +220,12 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
         status: PortForwardingRule["status"],
         error?: string,
       ) => void,
+      enableReconnect = false,
     ) => {
       return startPortForward(rule, host, keys, (status, error) => {
         setRuleStatus(rule.id, status, error);
         onStatusChange?.(status, error ?? undefined);
-      });
+      }, enableReconnect);
     },
     [setRuleStatus],
   );
@@ -218,6 +235,8 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
       ruleId: string,
       onStatusChange?: (status: PortForwardingRule["status"]) => void,
     ) => {
+      // Clear any pending reconnect timer when manually stopping
+      clearReconnectTimer(ruleId);
       return stopPortForward(ruleId, (status) => {
         setRuleStatus(ruleId, status);
         onStatusChange?.(status);

application/state/useSessionState.ts

@@ -72,6 +72,37 @@ export const useSessionState = () => {
   }, [setActiveTabId]);
 
   const connectToHost = useCallback((host: Host) => {
+    // Handle serial hosts specially - use createSerialSession for them
+    if (host.protocol === 'serial') {
+      // Use stored serialConfig or construct from host data
+      const serialConfig: SerialConfig = host.serialConfig || {
+        path: host.hostname,
+        baudRate: host.port || 115200,
+        dataBits: 8,
+        stopBits: 1,
+        parity: 'none',
+        flowControl: 'none',
+        localEcho: false,
+        lineMode: false,
+      };
+      
+      const sessionId = crypto.randomUUID();
+      const portName = serialConfig.path.split('/').pop() || serialConfig.path;
+      const newSession: TerminalSession = {
+        id: sessionId,
+        hostId: host.id,
+        hostLabel: host.label || `Serial: ${portName}`,
+        hostname: serialConfig.path,
+        username: '',
+        status: 'connecting',
+        protocol: 'serial',
+        serialConfig: serialConfig,
+      };
+      setSessions(prev => [...prev, newSession]);
+      setActiveTabId(sessionId);
+      return;
+    }
+
     const newSession: TerminalSession = {
       id: crypto.randomUUID(),
       hostId: host.id,

application/state/useSettingsState.ts

@@ -1,5 +1,5 @@
 import { useCallback,useEffect,useLayoutEffect,useMemo,useState } from 'react';
-import { SyncConfig, TerminalSettings, DEFAULT_TERMINAL_SETTINGS, HotkeyScheme, CustomKeyBindings, DEFAULT_KEY_BINDINGS, KeyBinding, UILanguage } from '../../domain/models';
+import { SyncConfig, TerminalSettings, DEFAULT_TERMINAL_SETTINGS, HotkeyScheme, CustomKeyBindings, DEFAULT_KEY_BINDINGS, KeyBinding, UILanguage, SessionLogFormat } from '../../domain/models';
 import {
 STORAGE_KEY_COLOR,
 STORAGE_KEY_SYNC,
@@ -16,11 +16,21 @@ STORAGE_KEY_UI_LANGUAGE,
 STORAGE_KEY_ACCENT_MODE,
 STORAGE_KEY_UI_THEME_LIGHT,
 STORAGE_KEY_UI_THEME_DARK,
+STORAGE_KEY_UI_FONT_FAMILY,
+STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR,
+STORAGE_KEY_SFTP_AUTO_SYNC,
+STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES,
+STORAGE_KEY_SESSION_LOGS_ENABLED,
+STORAGE_KEY_SESSION_LOGS_DIR,
+STORAGE_KEY_SESSION_LOGS_FORMAT,
 } from '../../infrastructure/config/storageKeys';
 import { DEFAULT_UI_LOCALE, resolveSupportedLocale } from '../../infrastructure/config/i18n';
 import { TERMINAL_THEMES } from '../../infrastructure/config/terminalThemes';
-import { TERMINAL_FONTS, DEFAULT_FONT_SIZE } from '../../infrastructure/config/fonts';
+import { DEFAULT_FONT_SIZE } from '../../infrastructure/config/fonts';
 import { DARK_UI_THEMES, LIGHT_UI_THEMES, UiThemeTokens, getUiThemeById } from '../../infrastructure/config/uiThemes';
+import { UI_FONTS, DEFAULT_UI_FONT_ID } from '../../infrastructure/config/uiFonts';
+import { uiFontStore, useUIFontsLoaded } from './uiFontStore';
+import { useAvailableFonts } from './fontStore';
 import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
 import { netcattyBridge } from '../../infrastructure/services/netcattyBridge';
 
@@ -32,10 +42,17 @@ const DEFAULT_CUSTOM_ACCENT = '221.2 83.2% 53.3%';
 const DEFAULT_TERMINAL_THEME = 'netcatty-dark';
 const DEFAULT_FONT_FAMILY = 'menlo';
 // Auto-detect default hotkey scheme based on platform
-const DEFAULT_HOTKEY_SCHEME: HotkeyScheme = 
-  typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/i.test(navigator.platform) 
-    ? 'mac' 
+const DEFAULT_HOTKEY_SCHEME: HotkeyScheme =
+  typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/i.test(navigator.platform)
+    ? 'mac'
     : 'pc';
+const DEFAULT_SFTP_DOUBLE_CLICK_BEHAVIOR: 'open' | 'transfer' = 'open';
+const DEFAULT_SFTP_AUTO_SYNC = false;
+const DEFAULT_SFTP_SHOW_HIDDEN_FILES = false;
+
+// Session Logs defaults
+const DEFAULT_SESSION_LOGS_ENABLED = false;
+const DEFAULT_SESSION_LOGS_FORMAT: SessionLogFormat = 'txt';
 
 const readStoredString = (key: string): string | null => {
   const raw = localStorageAdapter.readString(key);
@@ -63,6 +80,14 @@ const isValidUiThemeId = (theme: 'light' | 'dark', value: string): boolean => {
   return list.some((preset) => preset.id === value);
 };
 
+const isValidUiFontId = (value: string): boolean => {
+  // Local fonts are always considered valid
+  if (value.startsWith('local-')) return true;
+  // Check bundled fonts first, then check dynamically loaded fonts
+  return UI_FONTS.some((font) => font.id === value) ||
+         uiFontStore.getAvailableFonts().some((font) => font.id === value);
+};
+
 const applyThemeTokens = (
   theme: 'light' | 'dark',
   tokens: UiThemeTokens,
@@ -97,13 +122,15 @@ const applyThemeTokens = (
   root.style.setProperty('--border', tokens.border);
   root.style.setProperty('--input', tokens.input);
   root.style.setProperty('--ring', accentToken);
-  
+
   // Sync with native window title bar (Electron)
   netcattyBridge.get()?.setTheme?.(theme);
   netcattyBridge.get()?.setBackgroundColor?.(tokens.background);
 };
 
 export const useSettingsState = () => {
+  const availableFonts = useAvailableFonts();
+  const uiFontsLoaded = useUIFontsLoaded();
   const [theme, setTheme] = useState<'dark' | 'light'>(() => {
     const stored = readStoredString(STORAGE_KEY_THEME);
     return stored && isValidTheme(stored) ? stored : DEFAULT_THEME;
@@ -126,6 +153,10 @@ export const useSettingsState = () => {
     const legacyColor = readStoredString(STORAGE_KEY_COLOR);
     return legacyColor && isValidHslToken(legacyColor) ? 'custom' : DEFAULT_ACCENT_MODE;
   });
+  const [uiFontFamilyId, setUiFontFamilyId] = useState<string>(() => {
+    const stored = readStoredString(STORAGE_KEY_UI_FONT_FAMILY);
+    return stored && isValidUiFontId(stored) ? stored : DEFAULT_UI_FONT_ID;
+  });
   const [syncConfig, setSyncConfig] = useState<SyncConfig | null>(() => localStorageAdapter.read<SyncConfig>(STORAGE_KEY_SYNC));
   const [terminalThemeId, setTerminalThemeId] = useState<string>(() => localStorageAdapter.readString(STORAGE_KEY_TERM_THEME) || DEFAULT_TERMINAL_THEME);
   const [terminalFontFamilyId, setTerminalFontFamilyId] = useState<string>(() => localStorageAdapter.readString(STORAGE_KEY_TERM_FONT_FAMILY) || DEFAULT_FONT_FAMILY);
@@ -146,13 +177,39 @@ export const useSettingsState = () => {
     }
     return DEFAULT_HOTKEY_SCHEME;
   });
-  const [customKeyBindings, setCustomKeyBindings] = useState<CustomKeyBindings>(() => 
+  const [customKeyBindings, setCustomKeyBindings] = useState<CustomKeyBindings>(() =>
     localStorageAdapter.read<CustomKeyBindings>(STORAGE_KEY_CUSTOM_KEY_BINDINGS) || {}
   );
   const [isHotkeyRecording, setIsHotkeyRecordingState] = useState(false);
-  const [customCSS, setCustomCSS] = useState<string>(() => 
+  const [customCSS, setCustomCSS] = useState<string>(() =>
     localStorageAdapter.readString(STORAGE_KEY_CUSTOM_CSS) || ''
   );
+  const [sftpDoubleClickBehavior, setSftpDoubleClickBehavior] = useState<'open' | 'transfer'>(() => {
+    const stored = readStoredString(STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR);
+    return (stored === 'open' || stored === 'transfer') ? stored : DEFAULT_SFTP_DOUBLE_CLICK_BEHAVIOR;
+  });
+  const [sftpAutoSync, setSftpAutoSync] = useState<boolean>(() => {
+    const stored = readStoredString(STORAGE_KEY_SFTP_AUTO_SYNC);
+    return stored === 'true' ? true : DEFAULT_SFTP_AUTO_SYNC;
+  });
+  const [sftpShowHiddenFiles, setSftpShowHiddenFiles] = useState<boolean>(() => {
+    const stored = readStoredString(STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES);
+    return stored === 'true' ? true : DEFAULT_SFTP_SHOW_HIDDEN_FILES;
+  });
+
+  // Session Logs Settings
+  const [sessionLogsEnabled, setSessionLogsEnabled] = useState<boolean>(() => {
+    const stored = readStoredString(STORAGE_KEY_SESSION_LOGS_ENABLED);
+    return stored === 'true' ? true : DEFAULT_SESSION_LOGS_ENABLED;
+  });
+  const [sessionLogsDir, setSessionLogsDir] = useState<string>(() => {
+    return readStoredString(STORAGE_KEY_SESSION_LOGS_DIR) || '';
+  });
+  const [sessionLogsFormat, setSessionLogsFormat] = useState<SessionLogFormat>(() => {
+    const stored = readStoredString(STORAGE_KEY_SESSION_LOGS_FORMAT);
+    if (stored === 'txt' || stored === 'raw' || stored === 'html') return stored;
+    return DEFAULT_SESSION_LOGS_FORMAT;
+  });
 
   // Helper to notify other windows about settings changes via IPC
   const notifySettingsChanged = useCallback((key: string, value: unknown) => {
@@ -213,6 +270,15 @@ export const useSettingsState = () => {
     notifySettingsChanged(STORAGE_KEY_UI_LANGUAGE, uiLanguage);
   }, [uiLanguage, notifySettingsChanged]);
 
+  // Apply and persist UI font family
+  // Re-run when fonts finish loading to get correct family for local fonts
+  useLayoutEffect(() => {
+    const font = uiFontStore.getFontById(uiFontFamilyId);
+    document.documentElement.style.setProperty('--font-sans', font.family);
+    localStorageAdapter.writeString(STORAGE_KEY_UI_FONT_FAMILY, uiFontFamilyId);
+    notifySettingsChanged(STORAGE_KEY_UI_FONT_FAMILY, uiFontFamilyId);
+  }, [uiFontFamilyId, uiFontsLoaded, notifySettingsChanged]);
+
   // Listen for settings changes from other windows via IPC
 	  useEffect(() => {
 	    const bridge = netcattyBridge.get();
@@ -237,6 +303,11 @@ export const useSettingsState = () => {
       if (key === STORAGE_KEY_CUSTOM_CSS && typeof value === 'string') {
         syncCustomCssFromStorage();
       }
+      if (key === STORAGE_KEY_UI_FONT_FAMILY && typeof value === 'string') {
+        if (isValidUiFontId(value)) {
+          setUiFontFamilyId(value);
+        }
+      }
       if (key === STORAGE_KEY_TERM_THEME && typeof value === 'string') {
         setTerminalThemeId(value);
       }
@@ -323,6 +394,11 @@ export const useSettingsState = () => {
           setCustomCSS(e.newValue);
         }
       }
+      if (e.key === STORAGE_KEY_UI_FONT_FAMILY && e.newValue) {
+        if (isValidUiFontId(e.newValue) && e.newValue !== uiFontFamilyId) {
+          setUiFontFamilyId(e.newValue);
+        }
+      }
       if (e.key === STORAGE_KEY_HOTKEY_SCHEME && e.newValue) {
         const newScheme = e.newValue as HotkeyScheme;
         if (newScheme !== hotkeyScheme) {
@@ -371,11 +447,31 @@ export const useSettingsState = () => {
           setTerminalFontSize(newSize);
         }
       }
+      // Sync SFTP double-click behavior from other windows
+      if (e.key === STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR && e.newValue) {
+        if ((e.newValue === 'open' || e.newValue === 'transfer') && e.newValue !== sftpDoubleClickBehavior) {
+          setSftpDoubleClickBehavior(e.newValue);
+        }
+      }
+      // Sync SFTP auto-sync setting from other windows
+      if (e.key === STORAGE_KEY_SFTP_AUTO_SYNC && e.newValue !== null) {
+        const newValue = e.newValue === 'true';
+        if (newValue !== sftpAutoSync) {
+          setSftpAutoSync(newValue);
+        }
+      }
+      // Sync SFTP show hidden files setting from other windows
+      if (e.key === STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES && e.newValue !== null) {
+        const newValue = e.newValue === 'true';
+        if (newValue !== sftpShowHiddenFiles) {
+          setSftpShowHiddenFiles(newValue);
+        }
+      }
     };
 
     window.addEventListener('storage', handleStorageChange);
     return () => window.removeEventListener('storage', handleStorageChange);
-  }, [theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent, customCSS, hotkeyScheme, uiLanguage, terminalThemeId, terminalFontFamilyId, terminalFontSize]);
+  }, [theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent, customCSS, uiFontFamilyId, hotkeyScheme, uiLanguage, terminalThemeId, terminalFontFamilyId, terminalFontSize, sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles]);
 
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_TERM_THEME, terminalThemeId);
@@ -415,7 +511,7 @@ export const useSettingsState = () => {
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_CUSTOM_CSS, customCSS);
     notifySettingsChanged(STORAGE_KEY_CUSTOM_CSS, customCSS);
-    
+
     // Apply custom CSS to document
     let styleEl = document.getElementById('netcatty-custom-css') as HTMLStyleElement | null;
     if (!styleEl) {
@@ -426,6 +522,40 @@ export const useSettingsState = () => {
     styleEl.textContent = customCSS;
   }, [customCSS, notifySettingsChanged]);
 
+  // Persist SFTP double-click behavior
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR, sftpDoubleClickBehavior);
+    notifySettingsChanged(STORAGE_KEY_SFTP_DOUBLE_CLICK_BEHAVIOR, sftpDoubleClickBehavior);
+  }, [sftpDoubleClickBehavior, notifySettingsChanged]);
+
+  // Persist SFTP auto-sync setting
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_SFTP_AUTO_SYNC, sftpAutoSync ? 'true' : 'false');
+    notifySettingsChanged(STORAGE_KEY_SFTP_AUTO_SYNC, sftpAutoSync);
+  }, [sftpAutoSync, notifySettingsChanged]);
+
+  // Persist SFTP show hidden files setting
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES, sftpShowHiddenFiles ? 'true' : 'false');
+    notifySettingsChanged(STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES, sftpShowHiddenFiles);
+  }, [sftpShowHiddenFiles, notifySettingsChanged]);
+
+  // Persist Session Logs settings
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_SESSION_LOGS_ENABLED, sessionLogsEnabled ? 'true' : 'false');
+    notifySettingsChanged(STORAGE_KEY_SESSION_LOGS_ENABLED, sessionLogsEnabled);
+  }, [sessionLogsEnabled, notifySettingsChanged]);
+
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_SESSION_LOGS_DIR, sessionLogsDir);
+    notifySettingsChanged(STORAGE_KEY_SESSION_LOGS_DIR, sessionLogsDir);
+  }, [sessionLogsDir, notifySettingsChanged]);
+
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_SESSION_LOGS_FORMAT, sessionLogsFormat);
+    notifySettingsChanged(STORAGE_KEY_SESSION_LOGS_FORMAT, sessionLogsFormat);
+  }, [sessionLogsFormat, notifySettingsChanged]);
+
   // Get merged key bindings (defaults + custom overrides)
   const keyBindings = useMemo((): KeyBinding[] => {
     return DEFAULT_KEY_BINDINGS.map(binding => {
@@ -484,8 +614,8 @@ export const useSettingsState = () => {
   );
 
   const currentTerminalFont = useMemo(
-    () => TERMINAL_FONTS.find(f => f.id === terminalFontFamilyId) || TERMINAL_FONTS[0],
-    [terminalFontFamilyId]
+    () => availableFonts.find(f => f.id === terminalFontFamilyId) || availableFonts[0],
+    [terminalFontFamilyId, availableFonts]
   );
 
   const updateTerminalSetting = useCallback(<K extends keyof TerminalSettings>(
@@ -506,6 +636,8 @@ export const useSettingsState = () => {
     setAccentMode,
     customAccent,
     setCustomAccent,
+    uiFontFamilyId,
+    setUiFontFamilyId,
     syncConfig,
     updateSyncConfig,
     uiLanguage,
@@ -532,5 +664,19 @@ export const useSettingsState = () => {
     setIsHotkeyRecording,
     customCSS,
     setCustomCSS,
+    sftpDoubleClickBehavior,
+    setSftpDoubleClickBehavior,
+    sftpAutoSync,
+    setSftpAutoSync,
+    sftpShowHiddenFiles,
+    setSftpShowHiddenFiles,
+    availableFonts,
+    // Session Logs
+    sessionLogsEnabled,
+    setSessionLogsEnabled,
+    sessionLogsDir,
+    setSessionLogsDir,
+    sessionLogsFormat,
+    setSessionLogsFormat,
   };
 };

application/state/useSftpBackend.ts

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { netcattyBridge } from "../../infrastructure/services/netcattyBridge";
-import type { RemoteFile } from "../../types";
+import type { RemoteFile, SftpFilenameEncoding } from "../../types";
 
 export const useSftpBackend = () => {
   const openSftp = useCallback(async (options: NetcattySSHOptions) => {
@@ -15,34 +15,34 @@ export const useSftpBackend = () => {
     return bridge.closeSftp(sftpId);
   }, []);
 
-  const listSftp = useCallback(async (sftpId: string, path: string) => {
+  const listSftp = useCallback(async (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.listSftp) throw new Error("SFTP bridge unavailable");
-    return bridge.listSftp(sftpId, path);
+    return bridge.listSftp(sftpId, path, encoding);
   }, []);
 
-  const readSftp = useCallback(async (sftpId: string, path: string) => {
+  const readSftp = useCallback(async (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.readSftp) throw new Error("SFTP bridge unavailable");
-    return bridge.readSftp(sftpId, path);
+    return bridge.readSftp(sftpId, path, encoding);
   }, []);
 
-  const readSftpBinary = useCallback(async (sftpId: string, path: string) => {
+  const readSftpBinary = useCallback(async (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.readSftpBinary) throw new Error("readSftpBinary unavailable");
-    return bridge.readSftpBinary(sftpId, path);
+    return bridge.readSftpBinary(sftpId, path, encoding);
   }, []);
 
-  const writeSftp = useCallback(async (sftpId: string, path: string, content: string) => {
+  const writeSftp = useCallback(async (sftpId: string, path: string, content: string, encoding?: SftpFilenameEncoding) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.writeSftp) throw new Error("SFTP bridge unavailable");
-    return bridge.writeSftp(sftpId, path, content);
+    return bridge.writeSftp(sftpId, path, content, encoding);
   }, []);
 
-  const writeSftpBinary = useCallback(async (sftpId: string, path: string, content: ArrayBuffer) => {
+  const writeSftpBinary = useCallback(async (sftpId: string, path: string, content: ArrayBuffer, encoding?: SftpFilenameEncoding) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.writeSftpBinary) throw new Error("writeSftpBinary unavailable");
-    return bridge.writeSftpBinary(sftpId, path, content);
+    return bridge.writeSftpBinary(sftpId, path, content, encoding);
   }, []);
 
   const writeSftpBinaryWithProgress = useCallback(
@@ -51,6 +51,7 @@ export const useSftpBackend = () => {
       path: string,
       content: ArrayBuffer,
       transferId: string,
+      encoding?: SftpFilenameEncoding,
       onProgress?: (transferred: number, total: number, speed: number) => void,
       onComplete?: () => void,
       onError?: (error: string) => void,
@@ -62,6 +63,7 @@ export const useSftpBackend = () => {
         path,
         content,
         transferId,
+        encoding,
         onProgress,
         onComplete,
         onError,
@@ -70,34 +72,34 @@ export const useSftpBackend = () => {
     [],
   );
 
-  const mkdirSftp = useCallback(async (sftpId: string, path: string) => {
+  const mkdirSftp = useCallback(async (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.mkdirSftp) throw new Error("mkdirSftp unavailable");
-    return bridge.mkdirSftp(sftpId, path);
+    return bridge.mkdirSftp(sftpId, path, encoding);
   }, []);
 
-  const deleteSftp = useCallback(async (sftpId: string, path: string) => {
+  const deleteSftp = useCallback(async (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.deleteSftp) throw new Error("deleteSftp unavailable");
-    return bridge.deleteSftp(sftpId, path);
+    return bridge.deleteSftp(sftpId, path, encoding);
   }, []);
 
-  const renameSftp = useCallback(async (sftpId: string, oldPath: string, newPath: string) => {
+  const renameSftp = useCallback(async (sftpId: string, oldPath: string, newPath: string, encoding?: SftpFilenameEncoding) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.renameSftp) throw new Error("renameSftp unavailable");
-    return bridge.renameSftp(sftpId, oldPath, newPath);
+    return bridge.renameSftp(sftpId, oldPath, newPath, encoding);
   }, []);
 
-  const statSftp = useCallback(async (sftpId: string, path: string) => {
+  const statSftp = useCallback(async (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.statSftp) throw new Error("statSftp unavailable");
-    return bridge.statSftp(sftpId, path);
+    return bridge.statSftp(sftpId, path, encoding);
   }, []);
 
-  const chmodSftp = useCallback(async (sftpId: string, path: string, mode: string) => {
+  const chmodSftp = useCallback(async (sftpId: string, path: string, mode: string, encoding?: SftpFilenameEncoding) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.chmodSftp) throw new Error("chmodSftp unavailable");
-    return bridge.chmodSftp(sftpId, path, mode);
+    return bridge.chmodSftp(sftpId, path, mode, encoding);
   }, []);
 
   const listLocalDir = useCallback(async (path: string): Promise<RemoteFile[]> => {
@@ -168,12 +170,75 @@ export const useSftpBackend = () => {
     return bridge.cancelTransfer(transferId);
   }, []);
 
+  const cancelSftpUpload = useCallback(async (transferId: string) => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.cancelSftpUpload) return undefined;
+    return bridge.cancelSftpUpload(transferId);
+  }, []);
+
   const onTransferProgress = useCallback((transferId: string, cb: Parameters<NonNullable<NetcattyBridge["onTransferProgress"]>>[1]) => {
     const bridge = netcattyBridge.get();
     if (!bridge?.onTransferProgress) return undefined;
     return bridge.onTransferProgress(transferId, cb);
   }, []);
 
+  const selectApplication = useCallback(async () => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.selectApplication) return undefined;
+    return bridge.selectApplication();
+  }, []);
+
+  const downloadSftpToTempAndOpen = useCallback(async (
+    sftpId: string,
+    remotePath: string,
+    fileName: string,
+    appPath: string,
+    options?: { enableWatch?: boolean; encoding?: SftpFilenameEncoding }
+  ): Promise<{ localTempPath: string; watchId?: string }> => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.downloadSftpToTemp || !bridge?.openWithApplication) {
+      throw new Error("Download to temp / open with unavailable");
+    }
+    
+    // Download the file to temp
+    console.log("[SFTPBackend] Downloading file to temp", { sftpId, remotePath, fileName });
+    const tempPath = await bridge.downloadSftpToTemp(sftpId, remotePath, fileName, options?.encoding);
+    console.log("[SFTPBackend] File downloaded to temp", { tempPath });
+    
+    // Register temp file for cleanup when SFTP session closes (regardless of auto-sync setting)
+    if (bridge.registerTempFile) {
+      try {
+        await bridge.registerTempFile(sftpId, tempPath);
+      } catch (err) {
+        console.warn("[SFTPBackend] Failed to register temp file for cleanup:", err);
+      }
+    }
+    
+    // Open with the selected application
+    console.log("[SFTPBackend] Opening with application", { tempPath, appPath });
+    await bridge.openWithApplication(tempPath, appPath);
+    console.log("[SFTPBackend] Application launched");
+    
+    // Start file watching if enabled
+    let watchId: string | undefined;
+    console.log("[SFTPBackend] Auto-sync enabled check", { enableWatch: options?.enableWatch, hasStartFileWatch: !!bridge.startFileWatch });
+    if (options?.enableWatch && bridge.startFileWatch) {
+      try {
+        console.log("[SFTPBackend] Starting file watch", { tempPath, remotePath, sftpId });
+        const result = await bridge.startFileWatch(tempPath, remotePath, sftpId, options?.encoding);
+        watchId = result.watchId;
+        console.log("[SFTPBackend] File watch started successfully", { watchId, tempPath, remotePath });
+      } catch (err) {
+        console.warn("[SFTPBackend] Failed to start file watch:", err);
+        // Don't fail the operation if watching fails
+      }
+    } else {
+      console.log("[SFTPBackend] File watching not enabled or not available");
+    }
+    
+    return { localTempPath: tempPath, watchId };
+  }, []);
+
   return {
     openSftp,
     closeSftp,
@@ -200,7 +265,9 @@ export const useSftpBackend = () => {
 
     startStreamTransfer,
     cancelTransfer,
+    cancelSftpUpload,
     onTransferProgress,
+    selectApplication,
+    downloadSftpToTempAndOpen,
   };
 };
-

application/state/useSftpFileAssociations.ts

@@ -0,0 +1,149 @@
+/**
+ * useSftpFileAssociations - Hook for managing SFTP file opener associations
+ * 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 { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
+import type { FileAssociation, FileOpenerType, SystemAppInfo } from '../../lib/sftpFileUtils';
+import { getFileExtension } from '../../lib/sftpFileUtils';
+
+export interface FileAssociationEntry {
+  openerType: FileOpenerType;
+  systemApp?: SystemAppInfo;
+}
+
+export interface FileAssociationsMap {
+  [extension: string]: FileAssociationEntry;
+}
+
+// Shared state and subscribers for cross-component synchronization
+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 {
+  const stored = localStorageAdapter.read<FileAssociationsMap>(STORAGE_KEY_SFTP_FILE_ASSOCIATIONS);
+  console.log('[SftpFileAssociations] Loading from storage:', stored);
+  if (stored) {
+    const migrated: FileAssociationsMap = {};
+    for (const [ext, value] of Object.entries(stored)) {
+      if (typeof value === 'string') {
+        migrated[ext] = { openerType: value as FileOpenerType };
+      } else {
+        migrated[ext] = value as FileAssociationEntry;
+      }
+    }
+    console.log('[SftpFileAssociations] Migrated associations:', migrated);
+    return migrated;
+  }
+  return {};
+}
+
+// Initialize from storage
+snapshotRef = { associations: loadFromStorage() };
+
+function saveToStorage(associations: FileAssociationsMap) {
+  console.log('[SftpFileAssociations] saveToStorage called with:', associations);
+  localStorageAdapter.write(STORAGE_KEY_SFTP_FILE_ASSOCIATIONS, associations);
+  // Verify it was saved
+  const verify = localStorageAdapter.read(STORAGE_KEY_SFTP_FILE_ASSOCIATIONS);
+  console.log('[SftpFileAssociations] Verification read from storage:', verify);
+}
+
+function updateAssociations(newAssociations: FileAssociationsMap) {
+  console.log('[SftpFileAssociations] Updating associations:', newAssociations);
+  // Create new reference so useSyncExternalStore detects change
+  snapshotRef = { associations: newAssociations };
+  saveToStorage(newAssociations);
+  console.log('[SftpFileAssociations] Notifying', subscribers.size, 'subscribers');
+  subscribers.forEach(callback => callback());
+}
+
+function subscribe(callback: () => void) {
+  subscribers.add(callback);
+  return () => subscribers.delete(callback);
+}
+
+function getSnapshot() {
+  return snapshotRef;
+}
+
+export function useSftpFileAssociations() {
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const associations = snapshot.associations;
+
+  // Listen for storage events from other tabs/windows
+  useEffect(() => {
+    const handleStorage = (e: StorageEvent) => {
+      if (e.key === STORAGE_KEY_SFTP_FILE_ASSOCIATIONS) {
+        updateAssociations(loadFromStorage());
+      }
+    };
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, []);
+
+  /**
+   * Get the opener entry for a file based on its extension
+   */
+  const getOpenerForFile = useCallback((fileName: string): FileAssociationEntry | null => {
+    const ext = getFileExtension(fileName);
+    return associations[ext] || null;
+  }, [associations]);
+
+  /**
+   * Set the opener type for a specific extension
+   */
+  const setOpenerForExtension = useCallback((
+    extension: string, 
+    openerType: FileOpenerType,
+    systemApp?: SystemAppInfo
+  ) => {
+    console.log('[SftpFileAssociations] setOpenerForExtension called with:', { extension, openerType, systemApp });
+    console.log('[SftpFileAssociations] Current associations before update:', snapshotRef.associations);
+    updateAssociations({
+      ...snapshotRef.associations,
+      [extension.toLowerCase()]: { openerType, systemApp },
+    });
+  }, []);
+
+  /**
+   * Remove the association for a specific extension
+   */
+  const removeAssociation = useCallback((extension: string) => {
+    const next = { ...snapshotRef.associations };
+    delete next[extension.toLowerCase()];
+    updateAssociations(next);
+  }, []);
+
+  /**
+   * Get all associations as an array
+   */
+  const getAllAssociations = useCallback((): FileAssociation[] => {
+    const result = Object.entries(associations).map(([extension, entry]: [string, FileAssociationEntry]) => ({
+      extension,
+      openerType: entry.openerType,
+      systemApp: entry.systemApp,
+    }));
+    console.log('[SftpFileAssociations] getAllAssociations called, returning', result.length, 'items:', result);
+    return result;
+  }, [associations]);
+
+  /**
+   * Clear all associations
+   */
+  const clearAllAssociations = useCallback(() => {
+    updateAssociations({});
+  }, []);
+
+  return {
+    associations,
+    getOpenerForFile,
+    setOpenerForExtension,
+    removeAssociation,
+    getAllAssociations,
+    clearAllAssociations,
+  };
+}

application/state/useSftpFileOperations.ts

@@ -0,0 +1,184 @@
+/**
+ * useSftpFileOperations - Shared file operations for SFTP components
+ * 
+ * This hook provides common file operations like open, edit, preview
+ * that can be shared between SFTPModal and SftpView components.
+ */
+
+import { useCallback, useState } from "react";
+import { getFileExtension, isTextFile, FileOpenerType } from "../../lib/sftpFileUtils";
+import { toast } from "../../components/ui/toast";
+import { useI18n } from "../i18n/I18nProvider";
+import { useSftpFileAssociations } from "./useSftpFileAssociations";
+
+export interface FileOperationsState {
+  // Text editor state
+  showTextEditor: boolean;
+  textEditorTarget: { name: string; fullPath: string } | null;
+  textEditorContent: string;
+  loadingTextContent: boolean;
+  
+  // File opener dialog state
+  showFileOpenerDialog: boolean;
+  fileOpenerTarget: { name: string; fullPath: string } | null;
+}
+
+export interface FileOperationsActions {
+  // Open file based on type/association
+  openFile: (fileName: string, fullPath: string) => void;
+  
+  // Edit text file
+  editFile: (
+    fileName: string, 
+    fullPath: string, 
+    readContent: () => Promise<string>
+  ) => Promise<void>;
+  
+  // Save text file
+  saveTextFile: (
+    content: string, 
+    writeContent: (path: string, content: string) => Promise<void>
+  ) => Promise<void>;
+  
+  // Handle file opener selection
+  handleFileOpenerSelect: (
+    openerType: FileOpenerType, 
+    setAsDefault: boolean,
+    readTextContent: () => Promise<string>,
+    readImageData: () => Promise<ArrayBuffer>
+  ) => Promise<void>;
+  
+  // Close modals
+  closeTextEditor: () => void;
+  closeFileOpenerDialog: () => void;
+  
+  // Check if file can be edited
+  canEditFile: (fileName: string) => boolean;
+}
+
+export interface UseSftpFileOperationsResult {
+  state: FileOperationsState;
+  actions: FileOperationsActions;
+}
+
+export function useSftpFileOperations(): UseSftpFileOperationsResult {
+  const { t } = useI18n();
+  const { getOpenerForFile, setOpenerForExtension } = useSftpFileAssociations();
+  
+  // Text editor state
+  const [showTextEditor, setShowTextEditor] = useState(false);
+  const [textEditorTarget, setTextEditorTarget] = useState<{ name: string; fullPath: string } | null>(null);
+  const [textEditorContent, setTextEditorContent] = useState("");
+  const [loadingTextContent, setLoadingTextContent] = useState(false);
+  
+  // File opener dialog state
+  const [showFileOpenerDialog, setShowFileOpenerDialog] = useState(false);
+  const [fileOpenerTarget, setFileOpenerTarget] = useState<{ name: string; fullPath: string } | null>(null);
+
+  const canEditFile = useCallback((fileName: string) => {
+    return isTextFile(fileName);
+  }, []);
+
+  const closeTextEditor = useCallback(() => {
+    setShowTextEditor(false);
+    setTextEditorTarget(null);
+    setTextEditorContent("");
+  }, []);
+
+  const closeFileOpenerDialog = useCallback(() => {
+    setShowFileOpenerDialog(false);
+    setFileOpenerTarget(null);
+  }, []);
+
+  const editFile = useCallback(async (
+    fileName: string,
+    fullPath: string,
+    readContent: () => Promise<string>
+  ) => {
+    try {
+      setLoadingTextContent(true);
+      setTextEditorTarget({ name: fileName, fullPath });
+      const content = await readContent();
+      setTextEditorContent(content);
+      setShowTextEditor(true);
+    } catch (e) {
+      toast.error(
+        e instanceof Error ? e.message : t("sftp.error.loadFailed"),
+        "SFTP",
+      );
+    } finally {
+      setLoadingTextContent(false);
+    }
+  }, [t]);
+
+  const saveTextFile = useCallback(async (
+    content: string,
+    writeContent: (path: string, content: string) => Promise<void>
+  ) => {
+    if (!textEditorTarget) return;
+    await writeContent(textEditorTarget.fullPath, content);
+  }, [textEditorTarget]);
+
+  const openFile = useCallback((fileName: string, fullPath: string) => {
+    const savedOpener = getOpenerForFile(fileName);
+
+    if (savedOpener) {
+      // User has saved an opener for this file type
+      // We'll just set the target and let the caller handle it
+      setFileOpenerTarget({ name: fileName, fullPath });
+      
+      // Return the opener type so caller knows which operation to perform
+      if (savedOpener === 'builtin-editor' && canEditFile(fileName)) {
+        // Don't show dialog, caller should call editFile
+        return 'edit' as const;
+      }
+    }
+    
+    // No saved opener, show the dialog
+    setFileOpenerTarget({ name: fileName, fullPath });
+    setShowFileOpenerDialog(true);
+    return 'dialog' as const;
+  }, [getOpenerForFile, canEditFile]);
+
+  const handleFileOpenerSelect = useCallback(async (
+    openerType: FileOpenerType,
+    setAsDefault: boolean,
+    readTextContent: () => Promise<string>,
+    _readImageData: () => Promise<ArrayBuffer>
+  ) => {
+    if (!fileOpenerTarget) return;
+
+    if (setAsDefault) {
+      const ext = getFileExtension(fileOpenerTarget.name);
+      if (ext !== 'file') {
+        setOpenerForExtension(ext, openerType);
+      }
+    }
+
+    setShowFileOpenerDialog(false);
+
+    if (openerType === 'builtin-editor') {
+      await editFile(fileOpenerTarget.name, fileOpenerTarget.fullPath, readTextContent);
+    }
+  }, [fileOpenerTarget, setOpenerForExtension, editFile]);
+
+  return {
+    state: {
+      showTextEditor,
+      textEditorTarget,
+      textEditorContent,
+      loadingTextContent,
+      showFileOpenerDialog,
+      fileOpenerTarget,
+    },
+    actions: {
+      openFile,
+      editFile,
+      saveTextFile,
+      handleFileOpenerSelect,
+      closeTextEditor,
+      closeFileOpenerDialog,
+      canEditFile,
+    },
+  };
+}

application/state/useTerminalBackend.ts

@@ -116,6 +116,18 @@ export const useTerminalBackend = () => {
     return bridge.listSerialPorts();
   }, []);
 
+  const getSessionPwd = useCallback(async (sessionId: string) => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.getSessionPwd) return { success: false, error: 'getSessionPwd unavailable' };
+    return bridge.getSessionPwd(sessionId);
+  }, []);
+
+  const getServerStats = useCallback(async (sessionId: string) => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.getServerStats) return { success: false, error: 'getServerStats unavailable' };
+    return bridge.getServerStats(sessionId);
+  }, []);
+
   return {
     backendAvailable,
     telnetAvailable,
@@ -131,6 +143,8 @@ export const useTerminalBackend = () => {
     startSerialSession,
     listSerialPorts,
     execCommand,
+    getSessionPwd,
+    getServerStats,
     writeToSession,
     resizeSession,
     closeSession,

components/ConnectionLogsManager.tsx

@@ -4,9 +4,10 @@ import {
     Server,
     Terminal,
     Trash2,
+    Usb,
     User,
 } from "lucide-react";
-import React, { memo, useCallback, useMemo } from "react";
+import React, { memo, useCallback, useMemo, useState } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { cn } from "../lib/utils";
 import { ConnectionLog, Host } from "../types";
@@ -63,6 +64,7 @@ interface LogItemProps {
 const LogItem = memo<LogItemProps>(({ log, onToggleSaved, onDelete, onClick }) => {
     const { t, resolvedLocale } = useI18n();
     const isLocal = log.protocol === "local" || log.hostname === "localhost";
+    const isSerial = log.protocol === "serial";
 
     return (
         <div
@@ -92,14 +94,14 @@ const LogItem = memo<LogItemProps>(({ log, onToggleSaved, onDelete, onClick }) =
             <div className="flex items-center gap-2 flex-1 min-w-0">
                 <div className={cn(
                     "h-8 w-8 rounded-lg flex items-center justify-center shrink-0",
-                    isLocal ? "bg-emerald-500/10 text-emerald-500" : "bg-blue-500/10 text-blue-500"
+                    isSerial ? "bg-amber-500/10 text-amber-500" : isLocal ? "bg-emerald-500/10 text-emerald-500" : "bg-blue-500/10 text-blue-500"
                 )}>
-                    {isLocal ? <Terminal size={14} /> : <Server size={14} />}
+                    {isSerial ? <Usb size={14} /> : isLocal ? <Terminal size={14} /> : <Server size={14} />}
                 </div>
                 <div className="min-w-0">
                     <div className="text-sm font-medium truncate">{isLocal ? t("logs.localTerminal") : log.hostLabel}</div>
                     <div className="text-xs text-muted-foreground truncate">
-                        {isLocal ? "local" : `${log.protocol}, ${log.username}`}
+                        {isLocal ? "local" : isSerial ? `serial, ${log.hostname}` : `${log.protocol}, ${log.username}`}
                     </div>
                 </div>
             </div>
@@ -147,7 +149,11 @@ const ConnectionLogsManager: React.FC<ConnectionLogsManagerProps> = ({
     onOpenLogView,
 }) => {
     const { t } = useI18n();
-    const RENDER_LIMIT = 100;
+    const INITIAL_RENDER_LIMIT = 30;
+    const LOAD_MORE_COUNT = 30;
+
+    // Track how many items to show
+    const [renderLimit, setRenderLimit] = useState(INITIAL_RENDER_LIMIT);
 
     // Sort logs by newest first
     const filteredLogs = useMemo(() => {
@@ -155,10 +161,14 @@ const ConnectionLogsManager: React.FC<ConnectionLogsManagerProps> = ({
     }, [logs]);
 
     const displayedLogs = useMemo(() => {
-        return filteredLogs.slice(0, RENDER_LIMIT);
-    }, [filteredLogs]);
+        return filteredLogs.slice(0, renderLimit);
+    }, [filteredLogs, renderLimit]);
 
-    const hasMore = filteredLogs.length > RENDER_LIMIT;
+    const hasMore = filteredLogs.length > renderLimit;
+
+    const handleLoadMore = useCallback(() => {
+        setRenderLimit(prev => prev + LOAD_MORE_COUNT);
+    }, []);
 
     const handleToggleSaved = useCallback(
         (id: string) => onToggleSaved(id),
@@ -220,9 +230,12 @@ const ConnectionLogsManager: React.FC<ConnectionLogsManagerProps> = ({
                         <>
                             {renderedItems}
                             {hasMore && (
-                                <div className="text-center py-4 text-sm text-muted-foreground">
-                                    {t("logs.showing", { limit: RENDER_LIMIT, total: filteredLogs.length })}
-                                </div>
+                                <button
+                                    onClick={handleLoadMore}
+                                    className="w-full py-3 text-sm text-primary hover:bg-secondary/50 transition-colors"
+                                >
+                                    {t("logs.loadMore", { count: Math.min(LOAD_MORE_COUNT, filteredLogs.length - renderLimit) })}
+                                </button>
                             )}
                         </>
                     )}

components/DistroAvatar.tsx

@@ -1,4 +1,4 @@
-import { Server } from "lucide-react";
+import { Server, Usb } from "lucide-react";
 import React, { memo } from "react";
 import { normalizeDistroId } from "../domain/host";
 import { cn } from "../lib/utils";
@@ -69,6 +69,21 @@ const DistroAvatarInner: React.FC<DistroAvatarProps> = ({
   const containerClass = sizeClasses[size];
   const iconSize = iconSizes[size];
 
+  // Show USB icon for serial hosts
+  if (host.protocol === 'serial') {
+    return (
+      <div
+        className={cn(
+          containerClass,
+          "flex items-center justify-center bg-amber-500/15 text-amber-500",
+          className,
+        )}
+      >
+        <Usb className={iconSize} />
+      </div>
+    );
+  }
+
   if (logo && !errored) {
     return (
       <div

components/FileOpenerDialog.tsx

@@ -0,0 +1,132 @@
+/**
+ * FileOpenerDialog - Dialog for choosing how to open a file
+ */
+import { Edit2, FolderOpen } from 'lucide-react';
+import React, { useCallback, useState } from 'react';
+import { useI18n } from '../application/i18n/I18nProvider';
+import type { FileOpenerType, SystemAppInfo } from '../lib/sftpFileUtils';
+import { getFileExtension, isKnownBinaryFile } from '../lib/sftpFileUtils';
+import { Button } from './ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from './ui/dialog';
+
+interface FileOpenerDialogProps {
+  open: boolean;
+  onClose: () => void;
+  fileName: string;
+  onSelect: (openerType: FileOpenerType, setAsDefault: boolean, systemApp?: SystemAppInfo) => void;
+  onSelectSystemApp: () => Promise<SystemAppInfo | null>;
+}
+
+export const FileOpenerDialog: React.FC<FileOpenerDialogProps> = ({
+  open,
+  onClose,
+  fileName,
+  onSelect,
+  onSelectSystemApp,
+}) => {
+  const { t } = useI18n();
+  const [isSelectingApp, setIsSelectingApp] = useState(false);
+  const [rememberChoice, setRememberChoice] = useState(true);
+
+  const extension = getFileExtension(fileName);
+  // Show edit option for files that are not known binary formats
+  const canEdit = !isKnownBinaryFile(fileName);
+  // For files without extension, we use 'file' as virtual extension
+  // So we always allow setting default (hasExtension is always true)
+  const displayExtension = extension === 'file' ? t('sftp.opener.noExtension') : `.${extension}`;
+
+  const handleSelectBuiltIn = useCallback((openerType: FileOpenerType) => {
+    onSelect(openerType, rememberChoice);
+    onClose();
+  }, [rememberChoice, onSelect, onClose]);
+
+  const handleSelectSystemApp = useCallback(async () => {
+    setIsSelectingApp(true);
+    try {
+      const result = await onSelectSystemApp();
+      if (result) {
+        console.log('[FileOpenerDialog] Calling onSelect with rememberChoice:', rememberChoice, 'result:', result);
+        onSelect('system-app', rememberChoice, result);
+        onClose();
+      }
+    } catch (e) {
+      console.error('Failed to select application:', e);
+    } finally {
+      setIsSelectingApp(false);
+    }
+  }, [onSelectSystemApp, rememberChoice, onSelect, onClose]);
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => {
+      // Don't close while selecting system app
+      if (!isOpen && !isSelectingApp) {
+        onClose();
+      }
+    }}>
+      <DialogContent className="sm:max-w-[400px]">
+        <DialogHeader className="min-w-0">
+          <DialogTitle>{t('sftp.opener.title')}</DialogTitle>
+          <DialogDescription className="max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
+            {fileName}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="py-4 space-y-2">
+          {canEdit && (
+            <Button
+              variant="outline"
+              className="w-full justify-start gap-3 h-12"
+              onClick={() => handleSelectBuiltIn('builtin-editor')}
+            >
+              <Edit2 size={18} className="text-primary" />
+              <div className="text-left">
+                <div className="font-medium text-sm">{t('sftp.opener.builtInEditor')}</div>
+                <div className="text-xs text-muted-foreground">{t('sftp.opener.editDescription')}</div>
+              </div>
+            </Button>
+          )}
+
+          {/* System application option */}
+          <Button
+            variant="outline"
+            className="w-full justify-start gap-3 h-12"
+            onClick={handleSelectSystemApp}
+            disabled={isSelectingApp}
+          >
+            <FolderOpen size={18} className="text-primary" />
+            <div className="text-left">
+              <div className="font-medium text-sm">{t('sftp.opener.systemApp')}</div>
+              <div className="text-xs text-muted-foreground">{t('sftp.opener.systemAppDescription')}</div>
+            </div>
+          </Button>
+
+        </div>
+
+        {/* Remember choice checkbox - always show, use 'file' for no extension */}
+        <div className="flex items-center gap-2 pb-2">
+          <input
+            type="checkbox"
+            id="remember-choice"
+            checked={rememberChoice}
+            onChange={(e) => setRememberChoice(e.target.checked)}
+            className="rounded border-border h-4 w-4 accent-primary"
+          />
+          <label
+            htmlFor="remember-choice"
+            className="text-sm text-muted-foreground cursor-pointer select-none"
+          >
+            {t('sftp.opener.setDefault', { ext: displayExtension })}
+          </label>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            {t('common.cancel')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default FileOpenerDialog;

components/HostDetailsPanel.tsx

@@ -1,20 +1,29 @@
 import {
+  AlertTriangle,
   Check,
   ChevronDown,
+  FolderLock,
   FolderPlus,
+  Forward,
   Globe,
   Key,
+  KeyRound,
   Link2,
+  MapPin,
+  Palette,
   Plus,
+  Settings2,
   Shield,
   Tag,
   TerminalSquare,
   User,
   Variable,
+  Wifi,
   X,
 } from "lucide-react";
 import React, { useEffect, useMemo, useState, useCallback } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
+import { useApplicationBackend } from "../application/state/useApplicationBackend";
 import { TERMINAL_THEMES } from "../infrastructure/config/terminalThemes";
 import { MIN_FONT_SIZE, MAX_FONT_SIZE } from "../infrastructure/config/fonts";
 import { cn } from "../lib/utils";
@@ -28,11 +37,13 @@ import {
 } from "./ui/aside-panel";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
+import { Switch } from "./ui/switch";
 import { Card } from "./ui/card";
 import { Combobox, ComboboxOption, MultiCombobox } from "./ui/combobox";
 import { Input } from "./ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import { ScrollArea } from "./ui/scroll-area";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
 
 // Import host-details sub-panels
 import {
@@ -80,6 +91,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   onCreateTag,
 }) => {
   const { t } = useI18n();
+  const { checkSshAgent } = useApplicationBackend();
   const [form, setForm] = useState<Host>(
     () =>
       initialData ||
@@ -92,7 +104,6 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         protocol: "ssh",
         tags: [],
         os: "linux",
-        agentForwarding: false,
         authMethod: "password",
         charset: "UTF-8",
         theme: "Flexoki Dark",
@@ -116,6 +127,22 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   const [newGroupName, setNewGroupName] = useState("");
   const [newGroupParent, setNewGroupParent] = useState("");
 
+  // SSH Agent status for Windows (only checked when agentForwarding is enabled)
+  const [sshAgentStatus, setSshAgentStatus] = useState<{
+    running: boolean;
+    startupType: string | null;
+    error: string | null;
+  } | null>(null);
+
+  // Check SSH Agent status when agentForwarding is toggled on (Windows only)
+  useEffect(() => {
+    if (form.agentForwarding) {
+      checkSshAgent().then(setSshAgentStatus);
+    } else {
+      setSshAgentStatus(null);
+    }
+  }, [form.agentForwarding, checkSshAgent]);
+
   // Group input state for inline creation suggestion
   const [groupInputValue, setGroupInputValue] = useState(form.group || "");
 
@@ -223,6 +250,8 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
       group: groupInputValue.trim() || form.group,
       tags: form.tags || [],
       port: form.port || 22,
+      // Clear password if savePassword is explicitly set to false
+      password: form.savePassword === false ? undefined : form.password,
     };
     onSave(cleaned);
   };
@@ -481,9 +510,12 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
     >
       <AsidePanelContent>
         <Card className="p-3 space-y-2 bg-card border-border/80">
-          <p className="text-xs font-semibold">
-            {t("hostDetails.section.address")}
-          </p>
+          <div className="flex items-center gap-2">
+            <MapPin size={14} className="text-muted-foreground" />
+            <p className="text-xs font-semibold">
+              {t("hostDetails.section.address")}
+            </p>
+          </div>
           <div className="flex items-center gap-2">
             <DistroAvatar
               host={form as Host}
@@ -504,9 +536,12 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         </Card>
 
         <Card className="p-3 space-y-3 bg-card border-border/80">
-          <p className="text-xs font-semibold">
-            {t("hostDetails.section.general")}
-          </p>
+          <div className="flex items-center gap-2">
+            <Settings2 size={14} className="text-muted-foreground" />
+            <p className="text-xs font-semibold">
+              {t("hostDetails.section.general")}
+            </p>
+          </div>
           <Input
             placeholder={t("hostDetails.label.placeholder")}
             value={form.label}
@@ -522,12 +557,16 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
             <Combobox
               options={groupOptions}
               value={form.group || ""}
-              onValueChange={(val) => update("group", val)}
+              onValueChange={(val) => {
+                update("group", val);
+                setGroupInputValue(val);
+              }}
               placeholder={t("hostDetails.group.placeholder")}
               allowCreate={true}
               onCreateNew={(val) => {
                 onCreateGroup?.(val);
                 update("group", val);
+                setGroupInputValue(val);
               }}
               createText="Create Group"
               triggerClassName="flex-1 h-10"
@@ -553,9 +592,12 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         </Card>
 
         <Card className="p-3 space-y-3 bg-card border-border/80">
-          <p className="text-xs font-semibold">
-            {t("hostDetails.section.portCredentials")}
-          </p>
+          <div className="flex items-center gap-2">
+            <KeyRound size={14} className="text-muted-foreground" />
+            <p className="text-xs font-semibold">
+              {t("hostDetails.section.portCredentials")}
+            </p>
+          </div>
           <div className="flex items-center gap-2">
             <div className="flex-1 min-w-0 h-10 flex items-center gap-2 bg-secondary/70 border border-border/70 rounded-md px-3">
               <span className="text-xs text-muted-foreground">SSH on</span>
@@ -767,6 +809,19 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
               />
             )}
 
+            {/* Save Password toggle - shown when password is entered */}
+            {!selectedIdentity && !form.identityId && form.password && (
+              <div className="flex items-center justify-between py-1">
+                <span className="text-xs text-muted-foreground">
+                  {t("hostDetails.password.save")}
+                </span>
+                <Switch
+                  checked={form.savePassword ?? true}
+                  onCheckedChange={(val) => update("savePassword" as keyof Host, val)}
+                />
+              </div>
+            )}
+
             {/* Selected credential display */}
             {!selectedIdentity && form.identityFileId && (
               <div className="flex items-center gap-2 p-2 rounded-md bg-secondary/50 border border-border/60">
@@ -923,9 +978,61 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         </Card>
 
         <Card className="p-3 space-y-3 bg-card border-border/80">
-          <p className="text-xs font-semibold">
-            {t("hostDetails.section.appearance")}
-          </p>
+          <div className="flex items-center gap-2">
+            <FolderLock size={14} className="text-muted-foreground" />
+            <p className="text-xs font-semibold">
+              {t("hostDetails.section.sftp")}
+            </p>
+          </div>
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <div className="text-sm font-medium">
+                {t("hostDetails.sftp.sudo")}
+              </div>
+              <div className="text-xs text-muted-foreground">
+                {t("hostDetails.sftp.sudo.desc")}
+              </div>
+            </div>
+            <Switch
+              checked={form.sftpSudo || false}
+              onCheckedChange={(val) => update("sftpSudo", val)}
+            />
+          </div>
+          {form.sftpSudo && !form.password && !selectedIdentity?.password && (
+            <p className="text-xs text-amber-500">
+              {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>
+            <Select
+              value={form.sftpEncoding || "auto"}
+              onValueChange={(val) => update("sftpEncoding", val as Host["sftpEncoding"])}
+            >
+              <SelectTrigger className="h-8">
+                <SelectValue placeholder={t("sftp.encoding.label")} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="auto">{t("sftp.encoding.auto")}</SelectItem>
+                <SelectItem value="utf-8">{t("sftp.encoding.utf8")}</SelectItem>
+                <SelectItem value="gb18030">{t("sftp.encoding.gb18030")}</SelectItem>
+              </SelectContent>
+            </Select>
+          </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" />
+            <p className="text-xs font-semibold">
+              {t("hostDetails.section.appearance")}
+            </p>
+          </div>
 
           {/* SSH Theme Selection */}
           <button
@@ -1012,7 +1119,10 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         </Card>
 
         <Card className="p-3 space-y-3 bg-card border-border/80">
-          <p className="text-xs font-semibold">{t("hostDetails.section.mosh")}</p>
+          <div className="flex items-center gap-2">
+            <Wifi size={14} className="text-muted-foreground" />
+            <p className="text-xs font-semibold">{t("hostDetails.section.mosh")}</p>
+          </div>
           <ToggleRow
             label="Mosh"
             enabled={!!form.moshEnabled}
@@ -1020,75 +1130,109 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
           />
         </Card>
 
+        {/* Agent Forwarding */}
         <Card className="p-3 space-y-2 bg-card border-border/80">
+          <div className="flex items-center gap-2">
+            <Forward size={14} className="text-muted-foreground" />
+            <p className="text-xs font-semibold">{t("hostDetails.section.agentForwarding")}</p>
+          </div>
           <ToggleRow
             label={t("hostDetails.agentForwarding")}
             enabled={!!form.agentForwarding}
             onToggle={() => update("agentForwarding", !form.agentForwarding)}
           />
-        </Card>
-
-        {/* Host Chain Configuration - Only show when Agent Forwarding is enabled */}
-        {form.agentForwarding && (
-          <Card className="p-3 space-y-2 bg-card border-border/80">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <Link2 size={14} className="text-muted-foreground" />
-                <p className="text-xs font-semibold">
-                  {t("hostDetails.jumpHosts")}
+          <p className="text-xs text-muted-foreground">
+            {t("hostDetails.agentForwarding.desc")}
+          </p>
+          {form.agentForwarding && sshAgentStatus && !sshAgentStatus.running && (
+            <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" />
+              <div className="space-y-1">
+                <p className="text-xs text-yellow-600 dark:text-yellow-400 font-medium">
+                  {t("hostDetails.agentForwarding.agentNotRunning")}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {t("hostDetails.agentForwarding.agentNotRunningHint")}
                 </p>
               </div>
-              {chainedHosts.length > 0 ? (
-                <Badge variant="secondary" className="text-xs">
-                  {t("hostDetails.jumpHosts.hops", { count: chainedHosts.length })}
-                </Badge>
-              ) : (
-                <Badge
-                  variant="outline"
-                  className="text-xs text-muted-foreground"
-                >
-                  {t("hostDetails.jumpHosts.direct")}
-                </Badge>
-              )}
             </div>
-            {chainedHosts.length > 0 && (
-              <button
-                className="w-full flex items-center gap-1 p-2 rounded-md bg-secondary/50 hover:bg-secondary transition-colors cursor-pointer"
-                onClick={() => setActiveSubPanel("chain")}
+          )}
+        </Card>
+
+        {/* Proxy via Hosts (Jump Hosts / ProxyJump) */}
+        <Card className="p-3 space-y-2 bg-card border-border/80">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Link2 size={14} className="text-muted-foreground" />
+              <p className="text-xs font-semibold">
+                {t("hostDetails.jumpHosts")}
+              </p>
+            </div>
+            {chainedHosts.length > 0 ? (
+              <Badge variant="secondary" className="text-xs">
+                {t("hostDetails.jumpHosts.hops", { count: chainedHosts.length })}
+              </Badge>
+            ) : (
+              <Badge
+                variant="outline"
+                className="text-xs text-muted-foreground"
               >
-                <Link2
-                  size={14}
-                  className="text-muted-foreground flex-shrink-0"
-                />
-                <span className="text-sm truncate">
-                  {chainedHosts
-                    .slice(0, 3)
-                    .map((h) => h.hostname || h.label)
-                    .join(" -> ")}
-                  {chainedHosts.length > 3 && "..."}
-                </span>
+                {t("hostDetails.jumpHosts.direct")}
+              </Badge>
+            )}
+          </div>
+          {chainedHosts.length > 0 && (
+            <button
+              className="w-full flex flex-col items-start gap-1 p-2 rounded-md bg-secondary/50 hover:bg-secondary transition-colors cursor-pointer"
+              onClick={() => setActiveSubPanel("chain")}
+            >
+              <div className="w-full flex items-center justify-between">
+                <div className="flex items-center gap-1 min-w-0 flex-1">
+                  <Link2
+                    size={14}
+                    className="text-muted-foreground flex-shrink-0"
+                  />
+                  <span className="text-xs text-muted-foreground">
+                    {t("hostDetails.jumpHosts.hops", { count: chainedHosts.length })}
+                  </span>
+                </div>
                 <X
                   size={14}
-                  className="text-muted-foreground hover:text-destructive flex-shrink-0 ml-auto"
+                  className="text-muted-foreground hover:text-destructive flex-shrink-0"
                   onClick={(e) => {
                     e.stopPropagation();
                     clearHostChain();
                   }}
                 />
-              </button>
-            )}
-            {chainedHosts.length === 0 && (
-              <Button
-                variant="ghost"
-                className="w-full h-9 justify-start gap-2 text-sm"
-                onClick={() => setActiveSubPanel("chain")}
-              >
-                <Plus size={14} />
-                {t("hostDetails.jumpHosts.configure")}
-              </Button>
-            )}
-          </Card>
-        )}
+              </div>
+              <div className="w-full space-y-1 pl-5">
+                {chainedHosts.slice(0, 5).map((h, idx) => (
+                  <div key={h.id} className="flex items-center gap-1 text-sm">
+                    <span className="text-muted-foreground">{idx + 1}.</span>
+                    <span className="truncate">
+                      {h.label !== h.hostname ? `${h.hostname} (${h.label})` : h.hostname}
+                    </span>
+                  </div>
+                ))}
+                {chainedHosts.length > 5 && (
+                  <div className="text-xs text-muted-foreground">
+                    +{chainedHosts.length - 5} more...
+                  </div>
+                )}
+              </div>
+            </button>
+          )}
+          {chainedHosts.length === 0 && (
+            <Button
+              variant="ghost"
+              className="w-full h-9 justify-start gap-2 text-sm"
+              onClick={() => setActiveSubPanel("chain")}
+            >
+              <Plus size={14} />
+              {t("hostDetails.jumpHosts.configure")}
+            </Button>
+          )}
+        </Card>
 
         {/* Proxy Configuration */}
         <Card className="p-3 space-y-2 bg-card border-border/80">

components/HostForm.tsx

@@ -14,6 +14,7 @@ import {
 } from "./ui/dialog";
 import { Input } from "./ui/input";
 import { Label } from "./ui/label";
+import { Switch } from "./ui/switch";
 import {
   Select,
   SelectContent,
@@ -257,6 +258,52 @@ const HostForm: React.FC<HostFormProps> = ({
           </div>
 
           <div className="space-y-3 pt-2">
+            <div className="flex items-center justify-between space-x-2 border rounded-md p-3">
+              <div className="space-y-0.5">
+                <Label htmlFor="sftp-sudo" className="text-base">
+                  {t("hostDetails.sftp.sudo")}
+                </Label>
+                <p className="text-xs text-muted-foreground">
+                  {t("hostDetails.sftp.sudo.desc")}
+                </p>
+                {formData.sftpSudo && authType === "key" && (
+                  <p className="text-xs text-amber-500 mt-1">
+                    {t("hostDetails.sftp.sudo.passwordWarning")}
+                  </p>
+                )}
+              </div>
+              <Switch
+                id="sftp-sudo"
+                checked={formData.sftpSudo || false}
+                onCheckedChange={(checked) =>
+                  setFormData({ ...formData, sftpSudo: checked })
+                }
+              />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="sftp-encoding">
+                {t("hostDetails.sftp.encoding")}
+              </Label>
+              <Select
+                value={formData.sftpEncoding || "auto"}
+                onValueChange={(val) =>
+                  setFormData({ ...formData, sftpEncoding: val as Host["sftpEncoding"] })
+                }
+              >
+                <SelectTrigger id="sftp-encoding">
+                  <SelectValue placeholder={t("sftp.encoding.label")} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="auto">{t("sftp.encoding.auto")}</SelectItem>
+                  <SelectItem value="utf-8">{t("sftp.encoding.utf8")}</SelectItem>
+                  <SelectItem value="gb18030">{t("sftp.encoding.gb18030")}</SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground">
+                {t("hostDetails.sftp.encoding.desc")}
+              </p>
+            </div>
+
             <Label>{t("hostForm.auth.method")}</Label>
             <div className="grid grid-cols-2 gap-4">
               <div

components/KeyboardInteractiveModal.tsx

@@ -0,0 +1,200 @@
+/**
+ * Keyboard Interactive Authentication Modal
+ * Global modal for handling SSH keyboard-interactive authentication (2FA/MFA)
+ * This modal displays prompts from the SSH server and collects user responses.
+ */
+import { Eye, EyeOff, KeyRound, Loader2 } from "lucide-react";
+import React, { useCallback, useEffect, useState } from "react";
+import { useI18n } from "../application/i18n/I18nProvider";
+import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+
+export interface KeyboardInteractivePrompt {
+  prompt: string;
+  echo: boolean;
+}
+
+export interface KeyboardInteractiveRequest {
+  requestId: string;
+  name: string;
+  instructions: string;
+  prompts: KeyboardInteractivePrompt[];
+  hostname?: string;
+  savedPassword?: string | null;
+}
+
+interface KeyboardInteractiveModalProps {
+  request: KeyboardInteractiveRequest | null;
+  onSubmit: (requestId: string, responses: string[]) => void;
+  onCancel: (requestId: string) => void;
+}
+
+export const KeyboardInteractiveModal: React.FC<KeyboardInteractiveModalProps> = ({
+  request,
+  onSubmit,
+  onCancel,
+}) => {
+  const { t } = useI18n();
+  const [responses, setResponses] = useState<string[]>([]);
+  const [showPasswords, setShowPasswords] = useState<boolean[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Reset state when request changes
+  useEffect(() => {
+    if (request) {
+      setResponses(request.prompts.map(() => ""));
+      setShowPasswords(request.prompts.map(() => false));
+      setIsSubmitting(false);
+    }
+  }, [request]);
+
+  const handleResponseChange = useCallback((index: number, value: string) => {
+    setResponses((prev) => {
+      const updated = [...prev];
+      updated[index] = value;
+      return updated;
+    });
+  }, []);
+
+  const toggleShowPassword = useCallback((index: number) => {
+    setShowPasswords((prev) => {
+      const updated = [...prev];
+      updated[index] = !updated[index];
+      return updated;
+    });
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    if (!request || isSubmitting) return;
+    setIsSubmitting(true);
+    onSubmit(request.requestId, responses);
+  }, [request, responses, onSubmit, isSubmitting]);
+
+  const handleCancel = useCallback(() => {
+    if (!request) return;
+    onCancel(request.requestId);
+  }, [request, onCancel]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" && !isSubmitting) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit, isSubmitting]
+  );
+
+  if (!request) return null;
+
+  const title = request.name?.trim() || t("keyboard.interactive.title");
+  const description =
+    request.instructions?.trim() ||
+    (request.hostname
+      ? t("keyboard.interactive.descWithHost", { hostname: request.hostname })
+      : t("keyboard.interactive.desc"));
+
+  return (
+    <Dialog open={!!request} onOpenChange={(open) => !open && handleCancel()}>
+      <DialogContent className="sm:max-w-[425px]" hideCloseButton>
+        <DialogHeader>
+          <div className="flex items-center gap-3 mb-2">
+            <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
+              <KeyRound className="h-5 w-5 text-primary" />
+            </div>
+            <div>
+              <DialogTitle>{title}</DialogTitle>
+              <DialogDescription className="mt-1">
+                {description}
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="space-y-4 py-2">
+          {request.prompts.map((prompt, index) => {
+            const isPassword = !prompt.echo;
+            const showPassword = showPasswords[index];
+            // Clean up prompt text (remove trailing colon and whitespace)
+            const promptLabel = prompt.prompt.replace(/:\s*$/, "").trim();
+
+            return (
+              <div key={index} className="space-y-2">
+                <Label htmlFor={`ki-prompt-${index}`}>
+                  {promptLabel || t("keyboard.interactive.response")}
+                </Label>
+                <div className="relative">
+                  <Input
+                    id={`ki-prompt-${index}`}
+                    type={isPassword && !showPassword ? "password" : "text"}
+                    value={responses[index] || ""}
+                    onChange={(e) => handleResponseChange(index, e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder=""
+                    className={isPassword ? "pr-10" : undefined}
+                    autoFocus={index === 0}
+                    disabled={isSubmitting}
+                  />
+                  {isPassword && (
+                    <button
+                      type="button"
+                      className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground disabled:opacity-50 p-1"
+                      onClick={() => toggleShowPassword(index)}
+                      disabled={isSubmitting}
+                    >
+                      {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                    </button>
+                  )}
+                </div>
+                {/* Use saved password button - shown below input, right-aligned */}
+                {isPassword && request.savedPassword && !responses[index] && (
+                  <div className="flex justify-end">
+                    <button
+                      type="button"
+                      className="flex items-center gap-1 text-xs text-primary hover:text-primary/80 disabled:opacity-50"
+                      onClick={() => handleResponseChange(index, request.savedPassword!)}
+                      disabled={isSubmitting}
+                    >
+                      <KeyRound size={12} />
+                      <span>{t("keyboard.interactive.useSavedPassword")}</span>
+                    </button>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="flex items-center justify-between pt-2">
+          <Button
+            variant="secondary"
+            onClick={handleCancel}
+            disabled={isSubmitting}
+          >
+            {t("common.cancel")}
+          </Button>
+          <Button onClick={handleSubmit} disabled={isSubmitting}>
+            {isSubmitting ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                {t("keyboard.interactive.verifying")}
+              </>
+            ) : (
+              t("keyboard.interactive.submit")
+            )}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default KeyboardInteractiveModal;

components/LogView.tsx

@@ -2,7 +2,7 @@ import { Terminal as XTerm } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import { WebglAddon } from "@xterm/addon-webgl";
 import "@xterm/xterm/css/xterm.css";
-import { FileText, Palette, X } from "lucide-react";
+import { FileText, Download, Palette, X } from "lucide-react";
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { cn } from "../lib/utils";
@@ -34,6 +34,7 @@ const LogViewComponent: React.FC<LogViewProps> = ({
     const fitAddonRef = useRef<FitAddon | null>(null);
     const [isReady, setIsReady] = useState(false);
     const [themeModalOpen, setThemeModalOpen] = useState(false);
+    const [isExporting, setIsExporting] = useState(false);
 
     // Use log's saved theme/fontSize or fall back to defaults
     const currentTheme = useMemo(() => {
@@ -67,6 +68,30 @@ const LogViewComponent: React.FC<LogViewProps> = ({
         onUpdateLog(log.id, { fontSize });
     }, [log.id, onUpdateLog]);
 
+    // Handle export
+    const handleExport = useCallback(async () => {
+        if (!log.terminalData || isExporting) return;
+
+        setIsExporting(true);
+        try {
+            const { netcattyBridge } = await import("../infrastructure/services/netcattyBridge");
+            const bridge = netcattyBridge.get();
+            if (bridge?.exportSessionLog) {
+                await bridge.exportSessionLog({
+                    terminalData: log.terminalData,
+                    hostLabel: log.hostLabel,
+                    hostname: log.hostname,
+                    startTime: log.startTime,
+                    format: 'txt',
+                });
+            }
+        } catch (err) {
+            console.error('Failed to export session log:', err);
+        } finally {
+            setIsExporting(false);
+        }
+    }, [log.terminalData, log.hostLabel, log.hostname, log.startTime, isExporting]);
+
     // Initialize terminal
     useEffect(() => {
         if (!containerRef.current || !isVisible) return;
@@ -216,6 +241,21 @@ const LogViewComponent: React.FC<LogViewProps> = ({
                     </div>
                 </div>
                 <div className="flex items-center gap-2">
+                    {/* Export button */}
+                    {log.terminalData && (
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            className="gap-1.5 h-8 px-2"
+                            onClick={handleExport}
+                            disabled={isExporting}
+                            title={t("logView.export")}
+                        >
+                            <Download size={14} />
+                            <span className="text-xs">{t("logView.export")}</span>
+                        </Button>
+                    )}
+
                     {/* Theme & font customization button */}
                     <Button
                         variant="ghost"

components/PortForwardingNew.tsx

@@ -138,6 +138,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
               );
             }
           },
+          rule.autoStart, // Enable reconnect for auto-start rules
         );
         // Show error from result only if not already shown
         if (!result.success && result.error && !errorShown) {

components/QuickSwitcher.tsx

@@ -6,7 +6,7 @@ import {
   Terminal,
   TerminalSquare,
 } from "lucide-react";
-import React, { memo, useEffect, useRef, useState } from "react";
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { Host, TerminalSession, Workspace } from "../types";
 import { KeyBinding } from "../domain/models";
@@ -21,6 +21,42 @@ import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 import { ScrollArea } from "./ui/scroll-area";
 
+// Compute once at module level
+const IS_MAC = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform);
+
+// Memoized host item component to prevent unnecessary re-renders
+const HostItem = memo(({
+  host,
+  isSelected,
+  onSelect,
+  onMouseEnter,
+}: {
+  host: Host;
+  isSelected: boolean;
+  onSelect: (host: Host) => void;
+  onMouseEnter: () => void;
+}) => (
+  <div
+    className={`flex items-center justify-between px-4 py-2.5 cursor-pointer transition-colors ${isSelected ? "bg-primary/15" : "hover:bg-muted/50"
+      }`}
+    onClick={() => onSelect(host)}
+    onMouseEnter={onMouseEnter}
+  >
+    <div className="flex items-center gap-3 min-w-0">
+      <DistroAvatar
+        host={host}
+        fallback={host.label.slice(0, 2).toUpperCase()}
+        size="sm"
+      />
+      <span className="text-sm font-medium truncate">{host.label}</span>
+    </div>
+    <div className="text-[11px] text-muted-foreground">
+      {host.group ? `Personal / ${host.group}` : "Personal"}
+    </div>
+  </div>
+));
+HostItem.displayName = "HostItem";
+
 interface QuickSwitcherProps {
   isOpen: boolean;
   query: string;
@@ -52,12 +88,11 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
 }) => {
   const { t } = useI18n();
   // Get hotkey display strings
-  const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform);
-  const getHotkeyLabel = (actionId: string) => {
+  const getHotkeyLabel = useCallback((actionId: string) => {
     const binding = keyBindings?.find(k => k.id === actionId);
     if (!binding) return '';
-    return isMac ? binding.mac : binding.pc;
-  };
+    return IS_MAC ? binding.mac : binding.pc;
+  }, [keyBindings]);
   const quickSwitchKey = getHotkeyLabel('quick-switch');
   const [isFocused, setIsFocused] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -93,15 +128,16 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isOpen, onClose]);
 
-  if (!isOpen) return null;
+  // Memoize orphan sessions
+  const orphanSessions = useMemo(
+    () => sessions.filter((s) => !s.workspaceId),
+    [sessions]
+  );
 
   const showCategorized = isFocused || query.trim().length > 0;
 
-  // Get orphan sessions (sessions without workspace)
-  const orphanSessions = sessions.filter((s) => !s.workspaceId);
-
-  // Build categorized items for navigation
-  const buildFlatItems = () => {
+  // Memoize flat items list and index map
+  const { flatItems, itemIndexMap } = useMemo(() => {
     const items: QuickSwitcherItem[] = [];
 
     if (showCategorized) {
@@ -127,10 +163,21 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
       );
     }
 
-    return items;
-  };
+    // Build index map for O(1) lookup
+    const indexMap = new Map<string, number>();
+    items.forEach((item, idx) => {
+      indexMap.set(`${item.type}:${item.id}`, idx);
+    });
 
-  const flatItems = buildFlatItems();
+    return { flatItems: items, itemIndexMap: indexMap };
+  }, [showCategorized, results, orphanSessions, workspaces]);
+
+  // O(1) index lookup
+  const getItemIndex = useCallback((type: string, id: string) => {
+    return itemIndexMap.get(`${type}:${id}`) ?? -1;
+  }, [itemIndexMap]);
+
+  if (!isOpen) return null;
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === "ArrowDown") {
@@ -165,40 +212,6 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
     }
   };
 
-  // Helper to get item index in flat list
-  const getItemIndex = (type: string, id: string) => {
-    return flatItems.findIndex((item) => item.type === type && item.id === id);
-  };
-
-  const renderHostItem = (host: Host) => {
-    const idx = getItemIndex("host", host.id);
-    const isSelected = idx === selectedIndex;
-
-    return (
-      <div
-        key={host.id}
-        className={`flex items-center justify-between px-4 py-2.5 cursor-pointer transition-colors ${isSelected ? "bg-primary/15" : "hover:bg-muted/50"
-          }`}
-        onClick={() => {
-          onSelect(host);
-        }}
-        onMouseEnter={() => setSelectedIndex(idx)}
-      >
-        <div className="flex items-center gap-3 min-w-0">
-          <DistroAvatar
-            host={host}
-            fallback={host.label.slice(0, 2).toUpperCase()}
-            size="sm"
-          />
-          <span className="text-sm font-medium truncate">{host.label}</span>
-        </div>
-        <div className="text-[11px] text-muted-foreground">
-          {host.group ? `Personal / ${host.group}` : "Personal"}
-        </div>
-      </div>
-    );
-  };
-
   return (
     <div
       className="fixed inset-x-0 top-12 z-50 flex justify-center pt-2"
@@ -260,7 +273,15 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
               </div>
               <div>
                 {results.length > 0 ? (
-                  results.map(renderHostItem)
+                  results.map((host) => (
+                    <HostItem
+                      key={host.id}
+                      host={host}
+                      isSelected={getItemIndex("host", host.id) === selectedIndex}
+                      onSelect={onSelect}
+                      onMouseEnter={() => setSelectedIndex(getItemIndex("host", host.id))}
+                    />
+                  ))
                 ) : (
                   <div className="px-4 py-6 text-sm text-muted-foreground text-center">
                     No recent connections
@@ -289,7 +310,15 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
                       Hosts
                     </span>
                   </div>
-                  {results.map(renderHostItem)}
+                  {results.map((host) => (
+                    <HostItem
+                      key={host.id}
+                      host={host}
+                      isSelected={getItemIndex("host", host.id) === selectedIndex}
+                      onSelect={onSelect}
+                      onMouseEnter={() => setSelectedIndex(getItemIndex("host", host.id))}
+                    />
+                  ))}
                 </div>
               )}
 

components/SerialConnectModal.tsx

@@ -2,11 +2,11 @@
  * Serial Port Connect Modal
  * Allows users to configure and connect to a serial port
  */
-import { ChevronDown, ChevronUp, Cpu, RefreshCw, Usb } from 'lucide-react';
+import { ChevronDown, ChevronUp, Cpu, RefreshCw, Save, Usb } from 'lucide-react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useI18n } from '../application/i18n/I18nProvider';
 import { useTerminalBackend } from '../application/state/useTerminalBackend';
-import type { SerialConfig, SerialFlowControl, SerialParity } from '../domain/models';
+import type { Host, SerialConfig, SerialFlowControl, SerialParity } from '../domain/models';
 import { cn } from '../lib/utils';
 import { Button } from './ui/button';
 import { Combobox, type ComboboxOption } from './ui/combobox';
@@ -18,6 +18,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from './ui/dialog';
+import { Input } from './ui/input';
 import { Label } from './ui/label';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
 
@@ -35,6 +36,7 @@ interface SerialConnectModalProps {
   open: boolean;
   onClose: () => void;
   onConnect: (config: SerialConfig) => void;
+  onSaveHost?: (host: Host) => void;
 }
 
 const BAUD_RATES = [300, 1200, 2400, 4800, 9600, 19200, 38400, 57600, 115200, 230400, 460800, 921600];
@@ -47,6 +49,7 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
   open,
   onClose,
   onConnect,
+  onSaveHost,
 }) => {
   const { t } = useI18n();
   const [ports, setPorts] = useState<SerialPort[]>([]);
@@ -63,6 +66,10 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
   const [localEcho, setLocalEcho] = useState(false);
   const [lineMode, setLineMode] = useState(false);
 
+  // Save configuration state
+  const [saveConfig, setSaveConfig] = useState(false);
+  const [configLabel, setConfigLabel] = useState('');
+
   const terminalBackend = useTerminalBackend();
 
   const loadPorts = useCallback(async () => {
@@ -87,6 +94,14 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
     }
   }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // Generate a default label when port is selected
+  useEffect(() => {
+    if (selectedPort && !configLabel) {
+      const portName = selectedPort.split('/').pop() || selectedPort;
+      setConfigLabel(`Serial: ${portName}`);
+    }
+  }, [selectedPort, configLabel]);
+
   const handleConnect = () => {
     if (!selectedPort) return;
 
@@ -101,6 +116,26 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
       lineMode,
     };
 
+    // Save as host if checkbox is checked and onSaveHost is provided
+    if (saveConfig && onSaveHost) {
+      const portName = selectedPort.split('/').pop() || selectedPort;
+      const host: Host = {
+        id: `serial-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+        label: configLabel.trim() || `Serial: ${portName}`,
+        hostname: selectedPort,
+        // For serial hosts, port field stores baud rate as a numeric identifier.
+        // The full configuration is stored in serialConfig for actual connection.
+        port: baudRate,
+        username: '',
+        os: 'linux',
+        tags: ['serial'],
+        protocol: 'serial',
+        createdAt: Date.now(),
+        serialConfig: config, // Store full serial configuration for connection
+      };
+      onSaveHost(host);
+    }
+
     onConnect(config);
     onClose();
   };
@@ -114,9 +149,17 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
     }));
   }, [ports]);
 
-  // Validate: port path must start with /dev/
-  const isPortValid = selectedPort.trim().startsWith('/dev/');
-  const isBaudRateValid = BAUD_RATES.includes(baudRate);
+  // Validate: port path must start with /dev/ (Unix/macOS) or COM/\\.\COM (Windows)
+  const trimmedPort = selectedPort.trim();
+  const isPortValid =
+    trimmedPort.startsWith('/dev/') ||
+    /^COM\d+$/i.test(trimmedPort) ||
+    /^\\\\\.\\COM\d+$/i.test(trimmedPort);
+  // Allow custom baud rates as long as they are positive integers
+  const isBaudRateValid = Number.isInteger(baudRate) && baudRate > 0;
+
+  // Check if using 1.5 stop bits (limited Windows support)
+  const isStopBits15 = stopBits === 1.5;
   const isValid = isPortValid && isBaudRateValid;
 
   return (
@@ -171,18 +214,28 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
           {/* Baud Rate */}
           <div className="space-y-2">
             <Label htmlFor="baud-rate">{t('serial.field.baudRate')}</Label>
-            <select
-              id="baud-rate"
-              value={baudRate}
-              onChange={(e) => setBaudRate(parseInt(e.target.value, 10))}
-              className="w-full h-10 px-3 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
-            >
-              {BAUD_RATES.map((rate) => (
-                <option key={rate} value={rate}>
-                  {rate}
-                </option>
-              ))}
-            </select>
+            <Combobox
+              options={BAUD_RATES.map((rate) => ({
+                value: String(rate),
+                label: String(rate),
+              }))}
+              value={String(baudRate)}
+              onValueChange={(val) => {
+                const parsed = parseInt(val, 10);
+                if (!isNaN(parsed) && parsed > 0) {
+                  setBaudRate(parsed);
+                }
+              }}
+              placeholder={t('serial.field.baudRatePlaceholder')}
+              emptyText={t('serial.field.baudRateEmpty')}
+              allowCreate
+              createText={t('common.use')}
+            />
+            {baudRate > 0 && !BAUD_RATES.includes(baudRate) && (
+              <p className="text-xs text-muted-foreground">
+                {t('serial.field.customBaudRate')}
+              </p>
+            )}
           </div>
 
           {/* Advanced Options */}
@@ -236,6 +289,11 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
                       </option>
                     ))}
                   </select>
+                  {isStopBits15 && (
+                    <p className="text-xs text-yellow-500">
+                      {t('serial.field.stopBits15Warning')}
+                    </p>
+                  )}
                 </div>
               </div>
 
@@ -313,6 +371,40 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
               </div>
             </CollapsibleContent>
           </Collapsible>
+
+          {/* Save Configuration */}
+          {onSaveHost && (
+            <div className="space-y-3 pt-2 border-t border-border/60">
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label htmlFor="save-config" className="text-sm font-medium cursor-pointer">
+                    {t('serial.field.saveConfig')}
+                  </Label>
+                  <p className="text-xs text-muted-foreground">
+                    {t('serial.field.saveConfigDesc')}
+                  </p>
+                </div>
+                <input
+                  type="checkbox"
+                  id="save-config"
+                  checked={saveConfig}
+                  onChange={(e) => setSaveConfig(e.target.checked)}
+                  className="h-4 w-4 rounded border-input"
+                />
+              </div>
+              {saveConfig && (
+                <div className="space-y-2">
+                  <Label htmlFor="config-label">{t('serial.field.configLabel')}</Label>
+                  <Input
+                    id="config-label"
+                    value={configLabel}
+                    onChange={(e) => setConfigLabel(e.target.value)}
+                    placeholder={t('serial.field.configLabelPlaceholder')}
+                  />
+                </div>
+              )}
+            </div>
+          )}
         </div>
 
         <DialogFooter>
@@ -320,8 +412,12 @@ export const SerialConnectModal: React.FC<SerialConnectModalProps> = ({
             {t('common.cancel')}
           </Button>
           <Button onClick={handleConnect} disabled={!isValid}>
-            <Cpu size={14} className="mr-2" />
-            {t('common.connect')}
+            {saveConfig ? (
+              <Save size={14} className="mr-2" />
+            ) : (
+              <Cpu size={14} className="mr-2" />
+            )}
+            {saveConfig ? t('serial.connectAndSave') : t('common.connect')}
           </Button>
         </DialogFooter>
       </DialogContent>

components/SerialHostDetailsPanel.tsx

@@ -0,0 +1,415 @@
+/**
+ * Serial Host Details Panel
+ * A dedicated editor for serial port hosts (distinct from SSH HostDetailsPanel)
+ */
+import { ChevronDown, ChevronUp, Save, Tag, Usb } from 'lucide-react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useI18n } from '../application/i18n/I18nProvider';
+import { useTerminalBackend } from '../application/state/useTerminalBackend';
+import type { Host, SerialConfig, SerialFlowControl, SerialParity } from '../domain/models';
+
+import { Button } from './ui/button';
+import { Combobox, ComboboxOption, MultiCombobox } from './ui/combobox';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
+import {
+  AsidePanel,
+  AsidePanelContent,
+  AsidePanelFooter,
+} from './ui/aside-panel';
+
+interface SerialPort {
+  path: string;
+  manufacturer: string;
+  serialNumber: string;
+  vendorId: string;
+  productId: string;
+  pnpId: string;
+  type?: 'hardware' | 'pseudo' | 'custom';
+}
+
+interface SerialHostDetailsPanelProps {
+  initialData: Host;
+  allTags?: string[];
+  groups?: string[];
+  onSave: (host: Host) => void;
+  onCancel: () => void;
+}
+
+const BAUD_RATES = [300, 1200, 2400, 4800, 9600, 19200, 38400, 57600, 115200, 230400, 460800, 921600];
+const DATA_BITS: Array<5 | 6 | 7 | 8> = [5, 6, 7, 8];
+const STOP_BITS: Array<1 | 1.5 | 2> = [1, 1.5, 2];
+const PARITY_OPTIONS: SerialParity[] = ['none', 'even', 'odd', 'mark', 'space'];
+const FLOW_CONTROL_OPTIONS: SerialFlowControl[] = ['none', 'xon/xoff', 'rts/cts'];
+
+export const SerialHostDetailsPanel: React.FC<SerialHostDetailsPanelProps> = ({
+  initialData,
+  allTags = [],
+  groups = [],
+  onSave,
+  onCancel,
+}) => {
+  const { t } = useI18n();
+  const terminalBackend = useTerminalBackend();
+  const [ports, setPorts] = useState<SerialPort[]>([]);
+  const [isLoadingPorts, setIsLoadingPorts] = useState(false);
+  const [showAdvanced, setShowAdvanced] = useState(false);
+
+  // Form state
+  const [label, setLabel] = useState(initialData.label);
+  const [selectedPort, setSelectedPort] = useState(initialData.hostname || initialData.serialConfig?.path || '');
+  const [baudRate, setBaudRate] = useState(initialData.serialConfig?.baudRate || initialData.port || 115200);
+  const [dataBits, setDataBits] = useState<5 | 6 | 7 | 8>(initialData.serialConfig?.dataBits || 8);
+  const [stopBits, setStopBits] = useState<1 | 1.5 | 2>(initialData.serialConfig?.stopBits || 1);
+  const [parity, setParity] = useState<SerialParity>(initialData.serialConfig?.parity || 'none');
+  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 [tags, setTags] = useState<string[]>(initialData.tags || []);
+  const [group, setGroup] = useState(initialData.group || '');
+
+  const loadPorts = useCallback(async () => {
+    setIsLoadingPorts(true);
+    try {
+      const result = await terminalBackend.listSerialPorts();
+      setPorts(result);
+    } catch (err) {
+      console.error('[Serial] Failed to list ports:', err);
+    } finally {
+      setIsLoadingPorts(false);
+    }
+  }, [terminalBackend]);
+
+  useEffect(() => {
+    loadPorts();
+  }, [loadPorts]);
+
+  const handleSave = () => {
+    if (!selectedPort) return;
+
+    const config: SerialConfig = {
+      path: selectedPort,
+      baudRate,
+      dataBits,
+      stopBits,
+      parity,
+      flowControl,
+      localEcho,
+      lineMode,
+    };
+
+    const portName = selectedPort.split('/').pop() || selectedPort;
+    const updatedHost: Host = {
+      ...initialData,
+      label: label.trim() || `Serial: ${portName}`,
+      hostname: selectedPort,
+      port: baudRate,
+      tags,
+      group,
+      serialConfig: config,
+    };
+
+    onSave(updatedHost);
+  };
+
+  // Convert ports to Combobox options
+  const portOptions: ComboboxOption[] = useMemo(() => {
+    return ports.map((port) => ({
+      value: port.path,
+      label: port.path,
+      sublabel: port.manufacturer || undefined,
+    }));
+  }, [ports]);
+
+  // Tag options for MultiCombobox
+  const tagOptions: ComboboxOption[] = useMemo(() => {
+    const allUniqueTags = new Set([...allTags, ...tags]);
+    return Array.from(allUniqueTags).map((tag) => ({
+      value: tag,
+      label: tag,
+    }));
+  }, [allTags, tags]);
+
+  // Group options for Combobox
+  const groupOptions: ComboboxOption[] = useMemo(() => {
+    const allGroups = new Set(groups);
+    if (group && !allGroups.has(group)) {
+      allGroups.add(group);
+    }
+    return Array.from(allGroups).map((g) => ({
+      value: g,
+      label: g,
+    }));
+  }, [groups, group]);
+
+  // Validation
+  const trimmedPort = selectedPort.trim();
+  const isPortValid =
+    trimmedPort.startsWith('/dev/') ||
+    /^COM\d+$/i.test(trimmedPort) ||
+    /^\\\\\.\\COM\d+$/i.test(trimmedPort);
+  const isBaudRateValid = Number.isInteger(baudRate) && baudRate > 0;
+  const isValid = isPortValid && isBaudRateValid;
+
+  // Check if using 1.5 stop bits (limited Windows support)
+  const isStopBits15 = stopBits === 1.5;
+
+  return (
+    <AsidePanel
+      open={true}
+      onClose={onCancel}
+      title={t('serial.edit.title')}
+      subtitle={initialData.label}
+      className="z-40"
+    >
+      <AsidePanelContent>
+        {/* Label */}
+        <div className="space-y-2">
+          <Label htmlFor="serial-label">{t('serial.field.configLabel')}</Label>
+          <Input
+            id="serial-label"
+            value={label}
+            onChange={(e) => setLabel(e.target.value)}
+            placeholder={t('serial.field.configLabelPlaceholder')}
+          />
+        </div>
+
+        {/* Serial Port */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label htmlFor="serial-port">{t('serial.field.port')}</Label>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={loadPorts}
+              disabled={isLoadingPorts}
+              className="h-6 px-2 text-xs"
+            >
+              {t('common.refresh')}
+            </Button>
+          </div>
+          <Combobox
+            options={portOptions}
+            value={selectedPort}
+            onValueChange={setSelectedPort}
+            placeholder={t('serial.field.selectPort')}
+            emptyText={t('serial.noPorts')}
+            allowCreate
+            createText={t('common.use')}
+            icon={<Usb size={14} className="text-muted-foreground" />}
+          />
+          {!isPortValid && selectedPort && (
+            <p className="text-xs text-destructive">
+              {t('serial.field.customPortPlaceholder')}
+            </p>
+          )}
+        </div>
+
+        {/* Baud Rate */}
+        <div className="space-y-2">
+          <Label htmlFor="baud-rate">{t('serial.field.baudRate')}</Label>
+          <Combobox
+            options={BAUD_RATES.map((rate) => ({
+              value: String(rate),
+              label: String(rate),
+            }))}
+            value={String(baudRate)}
+            onValueChange={(val) => {
+              const parsed = parseInt(val, 10);
+              if (!isNaN(parsed) && parsed > 0) {
+                setBaudRate(parsed);
+              }
+            }}
+            placeholder={t('serial.field.baudRatePlaceholder')}
+            emptyText={t('serial.field.baudRateEmpty')}
+            allowCreate
+            createText={t('common.use')}
+          />
+          {baudRate > 0 && !BAUD_RATES.includes(baudRate) && (
+            <p className="text-xs text-muted-foreground">
+              {t('serial.field.customBaudRate')}
+            </p>
+          )}
+        </div>
+
+        {/* Tags */}
+        <div className="space-y-2">
+          <Label className="flex items-center gap-2">
+            <Tag size={14} />
+            {t('hostDetails.tags')}
+          </Label>
+          <MultiCombobox
+            options={tagOptions}
+            values={tags}
+            onValuesChange={setTags}
+            placeholder={t('hostDetails.addTag')}
+            allowCreate
+            createText={t('hostDetails.createTag')}
+          />
+        </div>
+
+        {/* Group */}
+        <div className="space-y-2">
+          <Label>{t('hostDetails.group')}</Label>
+          <Combobox
+            options={groupOptions}
+            value={group}
+            onValueChange={setGroup}
+            placeholder={t('hostDetails.selectGroup')}
+            allowCreate
+            createText={t('hostDetails.createGroup')}
+          />
+        </div>
+
+        {/* Advanced Options */}
+        <Collapsible open={showAdvanced} onOpenChange={setShowAdvanced}>
+          <CollapsibleTrigger asChild>
+            <Button
+              variant="ghost"
+              className="w-full justify-between h-9 px-0 hover:bg-transparent"
+            >
+              <span className="text-sm font-medium text-muted-foreground">
+                {t('common.advanced')}
+              </span>
+              {showAdvanced ? (
+                <ChevronUp size={14} className="text-muted-foreground" />
+              ) : (
+                <ChevronDown size={14} className="text-muted-foreground" />
+              )}
+            </Button>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="space-y-4 pt-2">
+            {/* Data Bits */}
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="data-bits">{t('serial.field.dataBits')}</Label>
+                <select
+                  id="data-bits"
+                  value={dataBits}
+                  onChange={(e) => setDataBits(parseInt(e.target.value, 10) as 5 | 6 | 7 | 8)}
+                  className="w-full h-10 px-3 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                >
+                  {DATA_BITS.map((bits) => (
+                    <option key={bits} value={bits}>
+                      {bits}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {/* Stop Bits */}
+              <div className="space-y-2">
+                <Label htmlFor="stop-bits">{t('serial.field.stopBits')}</Label>
+                <select
+                  id="stop-bits"
+                  value={stopBits}
+                  onChange={(e) => setStopBits(parseFloat(e.target.value) as 1 | 1.5 | 2)}
+                  className="w-full h-10 px-3 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                >
+                  {STOP_BITS.map((bits) => (
+                    <option key={bits} value={bits}>
+                      {bits}
+                    </option>
+                  ))}
+                </select>
+                {isStopBits15 && (
+                  <p className="text-xs text-yellow-500">
+                    {t('serial.field.stopBits15Warning')}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            {/* Parity */}
+            <div className="space-y-2">
+              <Label htmlFor="parity">{t('serial.field.parity')}</Label>
+              <select
+                id="parity"
+                value={parity}
+                onChange={(e) => setParity(e.target.value as SerialParity)}
+                className="w-full h-10 px-3 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+              >
+                {PARITY_OPTIONS.map((option) => (
+                  <option key={option} value={option}>
+                    {t(`serial.parity.${option}`)}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Flow Control */}
+            <div className="space-y-2">
+              <Label htmlFor="flow-control">{t('serial.field.flowControl')}</Label>
+              <select
+                id="flow-control"
+                value={flowControl}
+                onChange={(e) => setFlowControl(e.target.value as SerialFlowControl)}
+                className="w-full h-10 px-3 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+              >
+                {FLOW_CONTROL_OPTIONS.map((option) => (
+                  <option key={option} value={option}>
+                    {t(`serial.flowControl.${option}`)}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Terminal Options */}
+            <div className="space-y-3 pt-2 border-t border-border/60">
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label htmlFor="local-echo" className="text-sm font-medium cursor-pointer">
+                    {t('serial.field.localEcho')}
+                  </Label>
+                  <p className="text-xs text-muted-foreground">
+                    {t('serial.field.localEchoDesc')}
+                  </p>
+                </div>
+                <input
+                  type="checkbox"
+                  id="local-echo"
+                  checked={localEcho}
+                  onChange={(e) => setLocalEcho(e.target.checked)}
+                  className="h-4 w-4 rounded border-input"
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label htmlFor="line-mode" className="text-sm font-medium cursor-pointer">
+                    {t('serial.field.lineMode')}
+                  </Label>
+                  <p className="text-xs text-muted-foreground">
+                    {t('serial.field.lineModeDesc')}
+                  </p>
+                </div>
+                <input
+                  type="checkbox"
+                  id="line-mode"
+                  checked={lineMode}
+                  onChange={(e) => setLineMode(e.target.checked)}
+                  className="h-4 w-4 rounded border-input"
+                />
+              </div>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </AsidePanelContent>
+
+      <AsidePanelFooter>
+        <div className="flex gap-2">
+          <Button variant="ghost" onClick={onCancel} className="flex-1">
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={handleSave} disabled={!isValid} className="flex-1">
+            <Save size={14} className="mr-2" />
+            {t('common.save')}
+          </Button>
+        </div>
+      </AsidePanelFooter>
+    </AsidePanel>
+  );
+};
+
+export default SerialHostDetailsPanel;

components/SettingsPage.tsx

@@ -2,7 +2,7 @@
  * Settings Page - Standalone settings window content
  * This component is rendered in a separate Electron window
  */
-import { AppWindow, Cloud, Keyboard, Palette, TerminalSquare, X } from "lucide-react";
+import { AppWindow, Cloud, FileType, HardDrive, Keyboard, Palette, TerminalSquare, X } from "lucide-react";
 import React, { useCallback, useEffect, useState } from "react";
 import { useSettingsState } from "../application/state/useSettingsState";
 import { useVaultState } from "../application/state/useVaultState";
@@ -10,13 +10,18 @@ import { useWindowControls } from "../application/state/useWindowControls";
 import { I18nProvider, useI18n } from "../application/i18n/I18nProvider";
 import SettingsApplicationTab from "./SettingsApplicationTab";
 import SettingsAppearanceTab from "./settings/tabs/SettingsAppearanceTab";
+import SettingsFileAssociationsTab from "./settings/tabs/SettingsFileAssociationsTab";
 import SettingsShortcutsTab from "./settings/tabs/SettingsShortcutsTab";
 import SettingsTerminalTab from "./settings/tabs/SettingsTerminalTab";
+import SettingsSystemTab from "./settings/tabs/SettingsSystemTab";
 import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
+import type { TerminalFont } from "../infrastructure/config/fonts";
 
 const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
 
-type SettingsState = ReturnType<typeof useSettingsState>;
+type SettingsState = ReturnType<typeof useSettingsState> & {
+    availableFonts: TerminalFont[];
+};
 
 const SettingsSyncTab = React.lazy(() => import("./settings/tabs/SettingsSyncTab"));
 
@@ -66,7 +71,7 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
     }, [closeSettingsWindow]);
 
     return (
-        <div className="h-screen flex flex-col bg-background text-foreground">
+        <div className="h-screen flex flex-col bg-background text-foreground font-sans">
             <div className="shrink-0 border-b border-border app-drag">
                 <div className="flex items-center justify-between px-4 pt-3">
                     {isMac && <div className="h-6" />}
@@ -117,12 +122,24 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                         >
                             <Keyboard size={14} /> {t("settings.tab.shortcuts")}
                         </TabsTrigger>
+                        <TabsTrigger
+                            value="file-associations"
+                            className="w-full justify-start gap-2 px-3 py-2 text-sm data-[state=active]:bg-background hover:bg-background/60 rounded-md transition-colors"
+                        >
+                            <FileType size={14} /> {t("settings.tab.sftpFileAssociations")}
+                        </TabsTrigger>
                         <TabsTrigger
                             value="sync"
                             className="w-full justify-start gap-2 px-3 py-2 text-sm data-[state=active]:bg-background hover:bg-background/60 rounded-md transition-colors"
                         >
                             <Cloud size={14} /> {t("settings.tab.syncCloud")}
                         </TabsTrigger>
+                        <TabsTrigger
+                            value="system"
+                            className="w-full justify-start gap-2 px-3 py-2 text-sm data-[state=active]:bg-background hover:bg-background/60 rounded-md transition-colors"
+                        >
+                            <HardDrive size={14} /> {t("settings.tab.system")}
+                        </TabsTrigger>
                     </TabsList>
                 </div>
 
@@ -141,6 +158,8 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                             setAccentMode={settings.setAccentMode}
                             customAccent={settings.customAccent}
                             setCustomAccent={settings.setCustomAccent}
+                            uiFontFamilyId={settings.uiFontFamilyId}
+                            setUiFontFamilyId={settings.setUiFontFamilyId}
                             uiLanguage={settings.uiLanguage}
                             setUiLanguage={settings.setUiLanguage}
                             customCSS={settings.customCSS}
@@ -158,6 +177,7 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                             setTerminalFontSize={settings.setTerminalFontSize}
                             terminalSettings={settings.terminalSettings}
                             updateTerminalSetting={settings.updateTerminalSetting}
+                            availableFonts={settings.availableFonts}
                         />
                     )}
 
@@ -173,11 +193,26 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                         />
                     )}
 
+                    {mountedTabs.has("file-associations") && (
+                        <SettingsFileAssociationsTab />
+                    )}
+
                     {mountedTabs.has("sync") && (
                         <React.Suspense fallback={null}>
                             <SettingsSyncTabWithVault />
                         </React.Suspense>
                     )}
+
+                    {mountedTabs.has("system") && (
+                        <SettingsSystemTab
+                            sessionLogsEnabled={settings.sessionLogsEnabled}
+                            setSessionLogsEnabled={settings.setSessionLogsEnabled}
+                            sessionLogsDir={settings.sessionLogsDir}
+                            setSessionLogsDir={settings.setSessionLogsDir}
+                            sessionLogsFormat={settings.sessionLogsFormat}
+                            setSessionLogsFormat={settings.setSessionLogsFormat}
+                        />
+                    )}
                 </div>
             </Tabs>
         </div>

components/SnippetsManager.tsx

@@ -565,12 +565,12 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
 
         {!snippets.length && displayedPackages.length === 0 && (
           <div className="flex-1 flex items-center justify-center px-4">
-            <div className="max-w-md w-full text-center space-y-3 py-12 rounded-2xl bg-secondary/60 border border-border/60 shadow-lg">
-              <div className="mx-auto h-12 w-12 rounded-xl bg-muted text-muted-foreground flex items-center justify-center">
-                <FileCode size={22} />
+            <div className="flex flex-col items-center justify-center text-muted-foreground">
+              <div className="h-16 w-16 rounded-2xl bg-secondary/80 flex items-center justify-center mb-4">
+                <FileCode size={32} className="opacity-60" />
               </div>
-              <div className="text-sm font-semibold text-foreground">{t('snippets.empty.title')}</div>
-              <div className="text-xs text-muted-foreground px-8">{t('snippets.empty.desc')}</div>
+              <h3 className="text-lg font-semibold text-foreground mb-2">{t('snippets.empty.title')}</h3>
+              <p className="text-sm text-center max-w-sm">{t('snippets.empty.desc')}</p>
             </div>
           </div>
         )}

components/SyncStatusButton.tsx

@@ -1,12 +1,12 @@
 /**
  * SyncStatusButton - Cloud Sync Status Indicator for Top Bar
- * 
+ *
  * Shows current sync state with cloud icon and colored indicators:
  * - Green dot: All synced
- * - Blue dot + spin: Syncing in progress  
+ * - Blue dot + spin: Syncing in progress
  * - Red dot: Error
  * - Gray dot: No providers connected
- * 
+ *
  * Clicking opens a popover with sync status details and history.
  */
 
@@ -239,7 +239,7 @@ export const SyncStatusButton: React.FC<SyncStatusButtonProps> = ({
                             <CloudOff size={32} className="mx-auto mb-2 text-muted-foreground" />
                             <p className="text-sm font-medium mb-1">{t('sync.notConfigured')}</p>
                             <p className="text-xs text-muted-foreground mb-3">
-                                Connect a cloud provider to sync your data across devices.
+                                {t('sync.autoSync.noProvider')}
                             </p>
                             <Button
                                 size="sm"
@@ -249,7 +249,7 @@ export const SyncStatusButton: React.FC<SyncStatusButtonProps> = ({
                                     onOpenSettings?.();
                                 }}
                             >
-                                Configure Cloud Sync
+                                {t('sync.settings')}
                             </Button>
                         </div>
                     ) : (

components/Terminal.tsx

@@ -3,8 +3,9 @@ import { FitAddon } from "@xterm/addon-fit";
 import { SerializeAddon } from "@xterm/addon-serialize";
 import { SearchAddon } from "@xterm/addon-search";
 import "@xterm/xterm/css/xterm.css";
-import { Maximize2, Radio } from "lucide-react";
+import { Cpu, HardDrive, Maximize2, MemoryStick, Radio, ArrowDownToLine, ArrowUpFromLine } from "lucide-react";
 import React, { memo, useEffect, useMemo, useRef, useState } from "react";
+import { flushSync } from "react-dom";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { logger } from "../lib/logger";
 import { cn } from "../lib/utils";
@@ -25,21 +26,22 @@ import { useTerminalBackend } from "../application/state/useTerminalBackend";
 import KnownHostConfirmDialog, { HostKeyInfo } from "./KnownHostConfirmDialog";
 import SFTPModal from "./SFTPModal";
 import { Button } from "./ui/button";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "./ui/hover-card";
 import { toast } from "./ui/toast";
-import { TERMINAL_FONTS } from "../infrastructure/config/fonts";
+import { useAvailableFonts } from "../application/state/fontStore";
 import { TERMINAL_THEMES } from "../infrastructure/config/terminalThemes";
 
 import { TerminalConnectionDialog } from "./terminal/TerminalConnectionDialog";
 import { TerminalToolbar } from "./terminal/TerminalToolbar";
 import { TerminalContextMenu } from "./terminal/TerminalContextMenu";
 import { TerminalSearchBar } from "./terminal/TerminalSearchBar";
-import { createHighlightProcessor } from "./terminal/keywordHighlight";
 import { createTerminalSessionStarters, type PendingAuth } from "./terminal/runtime/createTerminalSessionStarters";
 import { createXTermRuntime, type XTermRuntime } from "./terminal/runtime/createXTermRuntime";
 import { XTERM_PERFORMANCE_CONFIG } from "../infrastructure/config/xtermPerformance";
 import { useTerminalSearch } from "./terminal/hooks/useTerminalSearch";
 import { useTerminalContextActions } from "./terminal/hooks/useTerminalContextActions";
 import { useTerminalAuthState } from "./terminal/hooks/useTerminalAuthState";
+import { useServerStats } from "./terminal/hooks/useServerStats";
 
 interface TerminalProps {
   host: Host;
@@ -87,6 +89,19 @@ interface TerminalProps {
   onBroadcastInput?: (data: string, sourceSessionId: string) => void;
 }
 
+// Helper function to format network speed (bytes/sec) to human-readable format
+function formatNetSpeed(bytesPerSec: number): string {
+  if (bytesPerSec < 1024) {
+    return `${bytesPerSec}B/s`;
+  } else if (bytesPerSec < 1024 * 1024) {
+    return `${(bytesPerSec / 1024).toFixed(1)}K/s`;
+  } else if (bytesPerSec < 1024 * 1024 * 1024) {
+    return `${(bytesPerSec / (1024 * 1024)).toFixed(1)}M/s`;
+  } else {
+    return `${(bytesPerSec / (1024 * 1024 * 1024)).toFixed(1)}G/s`;
+  }
+}
+
 const TerminalComponent: React.FC<TerminalProps> = ({
   host,
   keys,
@@ -127,8 +142,10 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   onToggleBroadcast,
   onBroadcastInput,
 }) => {
-  const CONNECTION_TIMEOUT = 12000;
+  // Timeout for connection - increased to 120s to allow time for keyboard-interactive (2FA) authentication
+  const CONNECTION_TIMEOUT = 120000;
   const { t } = useI18n();
+  const availableFonts = useAvailableFonts();
   const containerRef = useRef<HTMLDivElement>(null);
   const termRef = useRef<XTerm | null>(null);
   const fitAddonRef = useRef<FitAddon | null>(null);
@@ -146,12 +163,13 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const terminalSettingsRef = useRef(terminalSettings);
   terminalSettingsRef.current = terminalSettings;
 
-  const highlightProcessorRef = useRef<(text: string) => string>((t) => t);
   useEffect(() => {
-    highlightProcessorRef.current = createHighlightProcessor(
-      terminalSettings?.keywordHighlightRules ?? [],
-      terminalSettings?.keywordHighlightEnabled ?? false,
-    );
+    if (xtermRuntimeRef.current) {
+      xtermRuntimeRef.current.keywordHighlighter.setRules(
+        terminalSettings?.keywordHighlightRules ?? [],
+        terminalSettings?.keywordHighlightEnabled ?? false
+      );
+    }
   }, [terminalSettings?.keywordHighlightEnabled, terminalSettings?.keywordHighlightRules]);
 
   const hotkeySchemeRef = useRef(hotkeyScheme);
@@ -169,6 +187,8 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const terminalBackend = useTerminalBackend();
   const { resizeSession } = terminalBackend;
 
+
+
   const [isScriptsOpen, setIsScriptsOpen] = useState(false);
   const [status, setStatus] = useState<TerminalSession["status"]>("connecting");
   const [error, setError] = useState<string | null>(null);
@@ -178,6 +198,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const [timeLeft, setTimeLeft] = useState(CONNECTION_TIMEOUT / 1000);
   const [isCancelling, setIsCancelling] = useState(false);
   const [showSFTP, setShowSFTP] = useState(false);
+  const [sftpInitialPath, setSftpInitialPath] = useState<string | undefined>(undefined);
   const [progressValue, setProgressValue] = useState(15);
   const [hasSelection, setHasSelection] = useState(false);
 
@@ -202,6 +223,15 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     handleCloseSearch,
   } = terminalSearch;
 
+  // Server stats (CPU, Memory, Disk) for Linux servers
+  const { stats: serverStats } = useServerStats({
+    sessionId,
+    enabled: terminalSettings?.showServerStats ?? true,
+    refreshInterval: terminalSettings?.serverStatsRefreshInterval ?? 5,
+    isLinux: host.os === 'linux',
+    isConnected: status === 'connected',
+  });
+
   useEffect(() => {
     if (!error) {
       lastToastedErrorRef.current = null;
@@ -292,7 +322,6 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     disposeExitRef,
     fitAddonRef,
     serializeAddonRef,
-    highlightProcessorRef,
     pendingAuthRef,
     updateStatus,
     setStatus,
@@ -519,7 +548,18 @@ const TerminalComponent: React.FC<TerminalProps> = ({
           | 700
           | 800
           | 900;
-        termRef.current.options.fontWeightBold = terminalSettings.fontWeightBold as
+        const resolvedFontWeightBold = (() => {
+          const fontFamily = termRef.current?.options.fontFamily || "";
+          if (typeof document === "undefined" || !document.fonts?.check) {
+            return terminalSettings.fontWeightBold;
+          }
+          const weightSpec = `${terminalSettings.fontWeightBold} ${effectiveFontSize}px ${fontFamily}`;
+          return document.fonts.check(weightSpec)
+            ? terminalSettings.fontWeightBold
+            : terminalSettings.fontWeight;
+        })();
+
+        termRef.current.options.fontWeightBold = resolvedFontWeightBold as
           | 100
           | 200
           | 300
@@ -549,7 +589,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       termRef.current.options.fontSize = effectiveFontSize;
 
       const hostFontId = host.fontFamily || fontFamilyId || "menlo";
-      const fontObj = TERMINAL_FONTS.find((f) => f.id === hostFontId) || TERMINAL_FONTS[0];
+      const fontObj = availableFonts.find((f) => f.id === hostFontId) || availableFonts[0];
       termRef.current.options.fontFamily = fontObj.family;
 
       termRef.current.options.theme = {
@@ -559,7 +599,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
 
       setTimeout(() => safeFit(), 50);
     }
-  }, [host.fontSize, host.fontFamily, host.theme, fontFamilyId, fontSize, effectiveTheme]);
+  }, [host.fontSize, host.fontFamily, host.theme, fontFamilyId, fontSize, effectiveTheme, availableFonts]);
 
   useEffect(() => {
     if (isVisible && fitAddonRef.current) {
@@ -595,6 +635,27 @@ const TerminalComponent: React.FC<TerminalProps> = ({
           logger.warn("Fit after fonts ready failed", err);
         }
 
+        if (terminalSettings && termRef.current) {
+          const fontFamily = termRef.current.options?.fontFamily || "";
+          const effectiveFontSize = host.fontSize || fontSize;
+          if (typeof document !== "undefined" && document.fonts?.check) {
+            const weightSpec = `${terminalSettings.fontWeightBold} ${effectiveFontSize}px ${fontFamily}`;
+            const resolvedBold = document.fonts.check(weightSpec)
+              ? terminalSettings.fontWeightBold
+              : terminalSettings.fontWeight;
+            termRef.current.options.fontWeightBold = resolvedBold as
+              | 100
+              | 200
+              | 300
+              | 400
+              | 500
+              | 600
+              | 700
+              | 800
+              | 900;
+          }
+        }
+
         const id = sessionRef.current;
         if (id && term) {
           try {
@@ -612,7 +673,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     return () => {
       cancelled = true;
     };
-  }, [host.id, sessionId, resizeSession]);
+  }, [host.id, host.fontFamily, host.fontSize, fontFamilyId, fontSize, resizeSession, sessionId, terminalSettings]);
 
   useEffect(() => {
     if (!containerRef.current || !fitAddonRef.current) return;
@@ -729,6 +790,34 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     termRef.current?.writeln("\r\n[No active SSH session]");
   };
 
+  const handleOpenSFTP = async () => {
+    // If SFTP is already open, toggle it off
+    if (showSFTP) {
+      setShowSFTP(false);
+      return;
+    }
+
+    // Try to get the current working directory from the terminal session
+    let initialPath: string | undefined = undefined;
+    if (sessionRef.current) {
+      try {
+        const result = await terminalBackend.getSessionPwd(sessionRef.current);
+        if (result.success && result.cwd) {
+          initialPath = result.cwd;
+        }
+      } catch {
+        // Silently fail and open SFTP without initial path
+      }
+    }
+
+    // Use flushSync to ensure initialPath state is committed before opening SFTP modal
+    // This prevents React's batching from causing the modal to open with stale/undefined initialPath
+    flushSync(() => {
+      setSftpInitialPath(initialPath);
+    });
+    setShowSFTP(true);
+  };
+
   const handleCancelConnect = () => {
     setIsCancelling(true);
     auth.setNeedsAuth(false);
@@ -807,7 +896,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       onUpdateTerminalFontSize={onUpdateTerminalFontSize}
       isScriptsOpen={isScriptsOpen}
       setIsScriptsOpen={setIsScriptsOpen}
-      onOpenSFTP={() => setShowSFTP((v) => !v)}
+      onOpenSFTP={handleOpenSFTP}
       onSnippetClick={handleSnippetClick}
       onUpdateHost={onUpdateHost}
       showClose={opts?.showClose}
@@ -864,6 +953,266 @@ const TerminalComponent: React.FC<TerminalProps> = ({
                 )}
               />
             </div>
+            {/* Server Stats Display - Linux only */}
+            {host.os === 'linux' && terminalSettings?.showServerStats && status === 'connected' && serverStats.lastUpdated && (
+              <div className="flex items-center gap-2.5 ml-2 text-[10px] opacity-80 flex-nowrap overflow-hidden min-w-0">
+                {/* CPU with HoverCard for per-core details */}
+                <HoverCard openDelay={200} closeDelay={100}>
+                  <HoverCardTrigger asChild>
+                    <button
+                      className="flex items-center gap-0.5 hover:opacity-100 opacity-80 transition-opacity cursor-pointer flex-shrink-0"
+                      title={t("terminal.serverStats.cpu")}
+                    >
+                      <Cpu size={10} className="flex-shrink-0" />
+                      <span>
+                        {serverStats.cpu !== null ? `${serverStats.cpu}%` : '--'}
+                        {serverStats.cpuCores !== null && ` (${serverStats.cpuCores}C)`}
+                      </span>
+                    </button>
+                  </HoverCardTrigger>
+                  <HoverCardContent
+                    className="w-auto p-3"
+                    side="bottom"
+                    align="start"
+                    sideOffset={8}
+                  >
+                    <div className="text-xs space-y-2">
+                      <div className="font-medium text-sm mb-2">{t("terminal.serverStats.cpuCores")}</div>
+                      {serverStats.cpuPerCore.length > 0 ? (
+                        <div className="grid gap-1.5" style={{ gridTemplateColumns: `repeat(${Math.min(4, serverStats.cpuPerCore.length)}, 1fr)` }}>
+                          {serverStats.cpuPerCore.map((usage, index) => (
+                            <div key={index} className="flex flex-col items-center gap-1 min-w-[48px]">
+                              <div className="text-[10px] text-muted-foreground">Core {index}</div>
+                              <div className="w-full h-1.5 bg-muted rounded-full overflow-hidden">
+                                <div
+                                  className={cn(
+                                    "h-full rounded-full transition-all",
+                                    usage >= 90 ? "bg-red-500" : usage >= 70 ? "bg-amber-500" : "bg-emerald-500"
+                                  )}
+                                  style={{ width: `${usage}%` }}
+                                />
+                              </div>
+                              <div className={cn(
+                                "text-[11px] font-medium",
+                                usage >= 90 ? "text-red-400" : usage >= 70 ? "text-amber-400" : "text-emerald-400"
+                              )}>
+                                {usage}%
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      ) : (
+                        <div className="text-muted-foreground">{t("terminal.serverStats.noData")}</div>
+                      )}
+                    </div>
+                  </HoverCardContent>
+                </HoverCard>
+                {/* Memory with HoverCard for htop-style bar and top processes */}
+                <HoverCard openDelay={200} closeDelay={100}>
+                  <HoverCardTrigger asChild>
+                    <button
+                      className="flex items-center gap-0.5 hover:opacity-100 opacity-80 transition-opacity cursor-pointer flex-shrink-0"
+                      title={t("terminal.serverStats.memory")}
+                    >
+                      <MemoryStick size={10} className="flex-shrink-0" />
+                      <span>
+                        {serverStats.memUsed !== null && serverStats.memTotal !== null
+                          ? `${(serverStats.memUsed / 1024).toFixed(1)}/${(serverStats.memTotal / 1024).toFixed(1)}G`
+                          : '--'}
+                      </span>
+                    </button>
+                  </HoverCardTrigger>
+                  <HoverCardContent
+                    className="w-auto p-3"
+                    side="bottom"
+                    align="start"
+                    sideOffset={8}
+                  >
+                    <div className="text-xs space-y-3 min-w-[280px]">
+                      <div className="font-medium text-sm">{t("terminal.serverStats.memoryDetails")}</div>
+                      {/* htop-style memory bar */}
+                      {serverStats.memTotal !== null && (
+                        <div className="space-y-1.5">
+                          <div className="w-full h-3 bg-muted rounded overflow-hidden flex">
+                            {/* Used (green) */}
+                            {serverStats.memUsed !== null && serverStats.memUsed > 0 && (
+                              <div
+                                className="h-full bg-emerald-500"
+                                style={{ width: `${(serverStats.memUsed / serverStats.memTotal) * 100}%` }}
+                                title={`${t("terminal.serverStats.memUsed")}: ${(serverStats.memUsed / 1024).toFixed(1)}G`}
+                              />
+                            )}
+                            {/* Buffers (blue) */}
+                            {serverStats.memBuffers !== null && serverStats.memBuffers > 0 && (
+                              <div
+                                className="h-full bg-blue-500"
+                                style={{ width: `${(serverStats.memBuffers / serverStats.memTotal) * 100}%` }}
+                                title={`${t("terminal.serverStats.memBuffers")}: ${(serverStats.memBuffers / 1024).toFixed(1)}G`}
+                              />
+                            )}
+                            {/* Cached (amber/orange) */}
+                            {serverStats.memCached !== null && serverStats.memCached > 0 && (
+                              <div
+                                className="h-full bg-amber-500"
+                                style={{ width: `${(serverStats.memCached / serverStats.memTotal) * 100}%` }}
+                                title={`${t("terminal.serverStats.memCached")}: ${(serverStats.memCached / 1024).toFixed(1)}G`}
+                              />
+                            )}
+                          </div>
+                          {/* Legend */}
+                          <div className="flex flex-wrap gap-x-3 gap-y-1 text-[10px]">
+                            <div className="flex items-center gap-1">
+                              <div className="w-2 h-2 rounded-sm bg-emerald-500" />
+                              <span>{t("terminal.serverStats.memUsed")}: {serverStats.memUsed !== null ? `${(serverStats.memUsed / 1024).toFixed(1)}G` : '--'}</span>
+                            </div>
+                            <div className="flex items-center gap-1">
+                              <div className="w-2 h-2 rounded-sm bg-blue-500" />
+                              <span>{t("terminal.serverStats.memBuffers")}: {serverStats.memBuffers !== null ? `${(serverStats.memBuffers / 1024).toFixed(1)}G` : '--'}</span>
+                            </div>
+                            <div className="flex items-center gap-1">
+                              <div className="w-2 h-2 rounded-sm bg-amber-500" />
+                              <span>{t("terminal.serverStats.memCached")}: {serverStats.memCached !== null ? `${(serverStats.memCached / 1024).toFixed(1)}G` : '--'}</span>
+                            </div>
+                            <div className="flex items-center gap-1">
+                              <div className="w-2 h-2 rounded-sm bg-muted border border-border" />
+                              <span>{t("terminal.serverStats.memFree")}: {serverStats.memFree !== null ? `${(serverStats.memFree / 1024).toFixed(1)}G` : '--'}</span>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                      {/* Top 10 processes */}
+                      {serverStats.topProcesses.length > 0 && (
+                        <div className="space-y-1.5">
+                          <div className="font-medium text-[11px] text-muted-foreground">{t("terminal.serverStats.topProcesses")}</div>
+                          <div className="space-y-0.5 max-h-[150px] overflow-y-auto">
+                            {serverStats.topProcesses.map((proc, index) => (
+                              <div key={index} className="flex items-center gap-2 text-[10px]">
+                                <span className="w-[32px] text-right text-muted-foreground">{proc.memPercent.toFixed(1)}%</span>
+                                <div className="flex-1 h-1 bg-muted rounded-full overflow-hidden">
+                                  <div
+                                    className="h-full bg-emerald-500 rounded-full"
+                                    style={{ width: `${Math.min(100, proc.memPercent * 2)}%` }}
+                                  />
+                                </div>
+                                <span className="flex-shrink-0 font-mono truncate max-w-[140px]" title={proc.command}>
+                                  {proc.command.split('/').pop()?.split(' ')[0] || proc.command}
+                                </span>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </HoverCardContent>
+                </HoverCard>
+                {/* Disk - with HoverCard for disk details */}
+                <HoverCard openDelay={200} closeDelay={100}>
+                  <HoverCardTrigger asChild>
+                    <button
+                      className="flex items-center gap-0.5 hover:opacity-100 opacity-80 transition-opacity cursor-pointer flex-shrink-0"
+                      title={t("terminal.serverStats.disk")}
+                    >
+                      <HardDrive size={10} className="flex-shrink-0" />
+                      <span className={cn(
+                        serverStats.diskPercent !== null && serverStats.diskPercent >= 90 && "text-red-400",
+                        serverStats.diskPercent !== null && serverStats.diskPercent >= 80 && serverStats.diskPercent < 90 && "text-amber-400"
+                      )}>
+                        {serverStats.diskUsed !== null && serverStats.diskTotal !== null && serverStats.diskPercent !== null
+                          ? `${serverStats.diskUsed}/${serverStats.diskTotal}G (${serverStats.diskPercent}%)`
+                          : serverStats.diskPercent !== null
+                            ? `${serverStats.diskPercent}%`
+                            : '--'}
+                      </span>
+                    </button>
+                  </HoverCardTrigger>
+                  <HoverCardContent
+                    className="w-auto p-3"
+                    side="bottom"
+                    align="start"
+                    sideOffset={8}
+                  >
+                    <div className="text-xs space-y-2">
+                      <div className="font-medium text-sm mb-2">{t("terminal.serverStats.diskDetails")}</div>
+                      {serverStats.disks.length > 0 ? (
+                        <div className="space-y-2 max-h-[200px] overflow-y-auto">
+                          {serverStats.disks.map((disk, index) => (
+                            <div key={index} className="flex flex-col gap-1 min-w-[180px]">
+                              <div className="flex items-center justify-between gap-4">
+                                <span className="text-[10px] text-muted-foreground font-mono truncate max-w-[120px]" title={disk.mountPoint}>
+                                  {disk.mountPoint}
+                                </span>
+                                <span className={cn(
+                                  "text-[11px] font-medium whitespace-nowrap",
+                                  disk.percent >= 90 ? "text-red-400" : disk.percent >= 80 ? "text-amber-400" : "text-emerald-400"
+                                )}>
+                                  {disk.used}/{disk.total}G ({disk.percent}%)
+                                </span>
+                              </div>
+                              <div className="w-full h-1.5 bg-muted rounded-full overflow-hidden">
+                                <div
+                                  className={cn(
+                                    "h-full rounded-full transition-all",
+                                    disk.percent >= 90 ? "bg-red-500" : disk.percent >= 80 ? "bg-amber-500" : "bg-emerald-500"
+                                  )}
+                                  style={{ width: `${disk.percent}%` }}
+                                />
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      ) : (
+                        <div className="text-muted-foreground">{t("terminal.serverStats.noData")}</div>
+                      )}
+                    </div>
+                  </HoverCardContent>
+                </HoverCard>
+                {/* Network - with HoverCard for per-interface details */}
+                {serverStats.netInterfaces.length > 0 && (
+                  <HoverCard openDelay={200} closeDelay={100}>
+                    <HoverCardTrigger asChild>
+                      <button
+                        className="flex items-center gap-1 hover:opacity-100 opacity-80 transition-opacity cursor-pointer flex-shrink-0"
+                        title={t("terminal.serverStats.network")}
+                      >
+                        <ArrowDownToLine size={9} className="flex-shrink-0 text-emerald-400" />
+                        <span>{formatNetSpeed(serverStats.netRxSpeed)}</span>
+                        <ArrowUpFromLine size={9} className="flex-shrink-0 text-sky-400" />
+                        <span>{formatNetSpeed(serverStats.netTxSpeed)}</span>
+                      </button>
+                    </HoverCardTrigger>
+                    <HoverCardContent
+                      className="w-auto p-3"
+                      side="bottom"
+                      align="start"
+                      sideOffset={8}
+                    >
+                      <div className="text-xs space-y-2">
+                        <div className="font-medium text-sm mb-2">{t("terminal.serverStats.networkDetails")}</div>
+                        <div className="space-y-2 max-h-[200px] overflow-y-auto">
+                          {serverStats.netInterfaces.map((iface, index) => (
+                            <div key={index} className="flex items-center justify-between gap-4 min-w-[200px]">
+                              <span className="text-[10px] text-muted-foreground font-mono">
+                                {iface.name}
+                              </span>
+                              <div className="flex items-center gap-2">
+                                <span className="flex items-center gap-0.5 text-emerald-400">
+                                  <ArrowDownToLine size={9} />
+                                  {formatNetSpeed(iface.rxSpeed)}
+                                </span>
+                                <span className="flex items-center gap-0.5 text-sky-400">
+                                  <ArrowUpFromLine size={9} />
+                                  {formatNetSpeed(iface.txSpeed)}
+                                </span>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </HoverCardContent>
+                  </HoverCard>
+                )}
+              </div>
+            )}
             <div className="flex-1" />
             <div className="flex items-center gap-0.5 flex-shrink-0">
               {inWorkspace && onToggleBroadcast && (
@@ -927,7 +1276,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
             ref={containerRef}
             className="absolute inset-x-0 bottom-0"
             style={{
-              top: isSearchOpen ? "64px" : "40px",
+              top: isSearchOpen ? "64px" : "30px",
               paddingLeft: 6,
               backgroundColor: effectiveTheme.colors.background,
             }}
@@ -1046,10 +1395,12 @@ const TerminalComponent: React.FC<TerminalProps> = ({
               keySource: resolvedAuth.key?.source,
               proxy: proxyConfig,
               jumpHosts: jumpHosts && jumpHosts.length > 0 ? jumpHosts : undefined,
+              sftpSudo: host.sftpSudo,
             };
           })()}
           open={showSFTP && status === "connected"}
           onClose={() => setShowSFTP(false)}
+          initialPath={sftpInitialPath}
         />
       </div>
     </TerminalContextMenu>

components/TextEditorModal.tsx

@@ -0,0 +1,390 @@
+/**
+ * TextEditorModal - Modal for editing text files in SFTP with syntax highlighting
+ */
+import {
+  CloudUpload,
+  Loader2,
+  Search,
+  X,
+} from 'lucide-react';
+import Editor, { type OnMount, loader, useMonaco } from '@monaco-editor/react';
+import type * as Monaco from 'monaco-editor';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+// Configure Monaco to use local files instead of CDN
+const monacoBasePath = import.meta.env.DEV
+  ? './node_modules/monaco-editor/min/vs'
+  : `${import.meta.env.BASE_URL}monaco/vs`;
+loader.config({ paths: { vs: monacoBasePath } });
+
+import { useI18n } from '../application/i18n/I18nProvider';
+import { getLanguageId, getLanguageName, getSupportedLanguages } from '../lib/sftpFileUtils';
+import { Button } from './ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
+import { Combobox } from './ui/combobox';
+import { toast } from './ui/toast';
+
+interface TextEditorModalProps {
+  open: boolean;
+  onClose: () => void;
+  fileName: string;
+  initialContent: string;
+  onSave: (content: string) => Promise<void>;
+}
+
+// Map our language IDs to Monaco language IDs
+const languageIdToMonaco = (langId: string): string => {
+  const mapping: Record<string, string> = {
+    'javascript': 'javascript',
+    'typescript': 'typescript',
+    'python': 'python',
+    'shell': 'shell',
+    'batch': 'bat',
+    'powershell': 'powershell',
+    'c': 'c',
+    'cpp': 'cpp',
+    'java': 'java',
+    'kotlin': 'kotlin',
+    'go': 'go',
+    'rust': 'rust',
+    'ruby': 'ruby',
+    'php': 'php',
+    'perl': 'perl',
+    'lua': 'lua',
+    'r': 'r',
+    'swift': 'swift',
+    'dart': 'dart',
+    'csharp': 'csharp',
+    'fsharp': 'fsharp',
+    'vb': 'vb',
+    'html': 'html',
+    'css': 'css',
+    'scss': 'scss',
+    'sass': 'sass',
+    'less': 'less',
+    'json': 'json',
+    'jsonc': 'json',
+    'json5': 'json',
+    'xml': 'xml',
+    'yaml': 'yaml',
+    'toml': 'ini',
+    'ini': 'ini',
+    'sql': 'sql',
+    'graphql': 'graphql',
+    'markdown': 'markdown',
+    'plaintext': 'plaintext',
+    'vue': 'html',
+    'svelte': 'html',
+    'dockerfile': 'dockerfile',
+    'makefile': 'makefile',
+    'diff': 'diff',
+  };
+  return mapping[langId] || 'plaintext';
+};
+
+// Convert HSL string "h s% l%" to hex color
+const hslToHex = (hslString: string): string => {
+  const parts = hslString.trim().split(/\s+/);
+  if (parts.length < 3) return '#1e1e1e';
+  const h = parseFloat(parts[0]) / 360;
+  const s = parseFloat(parts[1].replace('%', '')) / 100;
+  const l = parseFloat(parts[2].replace('%', '')) / 100;
+
+  const hue2rgb = (p: number, q: number, t: number) => {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  };
+
+  let r: number, g: number, b: number;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+
+  const toHex = (x: number) => {
+    const hex = Math.round(x * 255).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+};
+
+// Get background color from CSS variable
+const getBackgroundColor = (): string => {
+  const bgValue = getComputedStyle(document.documentElement)
+    .getPropertyValue('--background')
+    .trim();
+  return bgValue ? hslToHex(bgValue) : '#1e1e1e';
+};
+
+export const TextEditorModal: React.FC<TextEditorModalProps> = ({
+  open,
+  onClose,
+  fileName,
+  initialContent,
+  onSave,
+}) => {
+  const { t } = useI18n();
+  const monaco = useMonaco();
+  const [content, setContent] = useState(initialContent);
+  const [saving, setSaving] = useState(false);
+  const [hasChanges, setHasChanges] = useState(false);
+  const [languageId, setLanguageId] = useState(() => getLanguageId(fileName));
+  const editorRef = useRef<Monaco.editor.IStandaloneCodeEditor | null>(null);
+
+  // Ref to store the latest save function to avoid stale closure in keyboard shortcut
+  const handleSaveRef = useRef<() => Promise<void>>(() => Promise.resolve());
+
+  // Track theme from document.documentElement class (syncs with app theme)
+  const [isDarkTheme, setIsDarkTheme] = useState(() =>
+    document.documentElement.classList.contains('dark')
+  );
+
+  // Track background color for custom theme
+  const [bgColor, setBgColor] = useState(() => getBackgroundColor());
+
+  // Custom theme name
+  const customThemeName = isDarkTheme ? 'netcatty-dark' : 'netcatty-light';
+
+  // Define and update custom Monaco themes based on UI background color
+  useEffect(() => {
+    if (!monaco) return;
+
+    // Define dark theme with custom background
+    monaco.editor.defineTheme('netcatty-dark', {
+      base: 'vs-dark',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': bgColor,
+      },
+    });
+
+    // Define light theme with custom background
+    monaco.editor.defineTheme('netcatty-light', {
+      base: 'vs',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': bgColor,
+      },
+    });
+
+    // Apply the current theme
+    monaco.editor.setTheme(customThemeName);
+  }, [monaco, isDarkTheme, bgColor, customThemeName]);
+
+  // Listen for theme changes via MutationObserver on <html> class and style
+  useEffect(() => {
+    const root = document.documentElement;
+    const updateTheme = () => {
+      setIsDarkTheme(root.classList.contains('dark'));
+      setBgColor(getBackgroundColor());
+    };
+    const observer = new MutationObserver(updateTheme);
+    observer.observe(root, { attributes: true, attributeFilter: ['class', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  // Reset content when file changes
+  useEffect(() => {
+    setContent(initialContent);
+    setHasChanges(false);
+    setLanguageId(getLanguageId(fileName));
+  }, [initialContent, fileName]);
+
+  // Track changes
+  useEffect(() => {
+    setHasChanges(content !== initialContent);
+  }, [content, initialContent]);
+
+  const handleSave = useCallback(async () => {
+    if (saving) return;
+    setSaving(true);
+    try {
+      await onSave(content);
+      setHasChanges(false);
+      toast.success(t('sftp.editor.saved'), 'SFTP');
+    } catch (e) {
+      toast.error(
+        e instanceof Error ? e.message : t('sftp.editor.saveFailed'),
+        'SFTP'
+      );
+    } finally {
+      setSaving(false);
+    }
+  }, [content, onSave, saving, t]);
+
+  // Keep the ref updated with the latest handleSave function
+  useEffect(() => {
+    handleSaveRef.current = handleSave;
+  }, [handleSave]);
+
+  const handleClose = useCallback(() => {
+    if (hasChanges) {
+      const confirmed = confirm(t('sftp.editor.unsavedChanges'));
+      if (!confirmed) return;
+    }
+    onClose();
+  }, [hasChanges, onClose, t]);
+
+  const handleEditorChange = useCallback((value: string | undefined) => {
+    setContent(value || '');
+  }, []);
+
+  const handleEditorMount: OnMount = useCallback((editor, monaco) => {
+    editorRef.current = editor;
+
+    // Add save shortcut - use ref to avoid stale closure
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+      handleSaveRef.current();
+    });
+
+    // Add find shortcut (Ctrl+F / Cmd+F)
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyF, () => {
+      // Trigger Monaco's built-in find widget
+      editor.trigger('keyboard', 'actions.find', null);
+    });
+  }, []);
+
+  // Trigger search dialog
+  const handleSearch = useCallback(() => {
+    if (editorRef.current) {
+      editorRef.current.trigger('keyboard', 'actions.find', null);
+      editorRef.current.focus();
+    }
+  }, []);
+
+  const supportedLanguages = useMemo(() => getSupportedLanguages(), []);
+  const monacoLanguage = useMemo(() => languageIdToMonaco(languageId), [languageId]);
+  const languageOptions = useMemo(
+    () => supportedLanguages.map((lang) => ({ value: lang.id, label: lang.name })),
+    [supportedLanguages],
+  );
+
+  const handleLanguageChange = useCallback((nextValue: string) => {
+    setLanguageId(nextValue || 'plaintext');
+  }, []);
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
+      <DialogContent className="max-w-5xl h-[85vh] flex flex-col p-0 gap-0" hideCloseButton>
+        {/* Header */}
+        <DialogHeader className="px-4 py-3 border-b border-border/60 flex-shrink-0">
+          <div className="flex items-center justify-between gap-4">
+            <div className="flex items-center gap-3 flex-1 min-w-0">
+              <DialogTitle className="text-sm font-semibold truncate">
+                {fileName}
+                {hasChanges && <span className="text-primary ml-1">*</span>}
+              </DialogTitle>
+            </div>
+            <div className="flex items-center gap-2 min-w-0">
+              {/* Search button */}
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={handleSearch}
+                title={t('common.search')}
+              >
+                <Search size={14} />
+              </Button>
+
+              {/* Language selector */}
+              <Combobox
+                options={languageOptions}
+                value={languageId}
+                onValueChange={handleLanguageChange}
+                placeholder={t('sftp.editor.syntaxHighlight')}
+                triggerClassName="h-7 max-w-[180px] min-w-[120px] text-xs"
+              />
+
+              {/* Save button */}
+              <Button
+                variant="default"
+                size="sm"
+                className="h-7"
+                onClick={handleSave}
+                disabled={saving || !hasChanges}
+              >
+                {saving ? (
+                  <Loader2 size={14} className="mr-1.5 animate-spin" />
+                ) : (
+                  <CloudUpload size={14} className="mr-1.5" />
+                )}
+                {saving ? t('sftp.editor.saving') : t('sftp.editor.save')}
+              </Button>
+
+              {/* Close button */}
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={handleClose}
+              >
+                <X size={14} />
+              </Button>
+            </div>
+          </div>
+        </DialogHeader>
+
+        {/* Monaco Editor */}
+        <div className="flex-1 min-h-0 relative">
+          <Editor
+            height="100%"
+            language={monacoLanguage}
+            value={content}
+            onChange={handleEditorChange}
+            onMount={handleEditorMount}
+            theme={customThemeName}
+            loading={
+              <div className="absolute inset-0 flex items-center justify-center bg-background">
+                <Loader2 size={32} className="animate-spin text-muted-foreground" />
+              </div>
+            }
+            options={{
+              minimap: { enabled: true },
+              fontSize: 14,
+              lineNumbers: 'on',
+              roundedSelection: false,
+              scrollBeyondLastLine: false,
+              automaticLayout: true,
+              tabSize: 2,
+              insertSpaces: true,
+              wordWrap: 'off',
+              folding: true,
+              renderWhitespace: 'selection',
+              bracketPairColorization: { enabled: true },
+              find: {
+                addExtraSpaceOnTop: false,
+                autoFindInSelection: 'never',
+                seedSearchStringFromSelection: 'selection',
+              },
+            }}
+          />
+        </div>
+
+        {/* Footer */}
+        <div className="px-4 py-2 border-t border-border/60 flex items-center justify-between text-xs text-muted-foreground bg-muted/30 flex-shrink-0">
+          <span>
+            {getLanguageName(languageId)}
+          </span>
+          <span>
+            {content.split('\n').length} lines • {content.length} characters
+          </span>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default TextEditorModal;

components/VaultView.tsx

@@ -2,6 +2,7 @@ import {
   Activity,
   BookMarked,
   ChevronDown,
+  Copy,
   Edit2,
   FileCode,
   FolderPlus,
@@ -41,7 +42,6 @@ import {
   TerminalSession,
 } from "../types";
 import { AppLogo } from "./AppLogo";
-import ConnectionLogsManager from "./ConnectionLogsManager";
 import { DistroAvatar } from "./DistroAvatar";
 import HostDetailsPanel from "./HostDetailsPanel";
 import KeychainManager from "./KeychainManager";
@@ -50,6 +50,7 @@ import PortForwarding from "./PortForwardingNew";
 import QuickConnectWizard from "./QuickConnectWizard";
 import { isQuickConnectInput, parseQuickConnectInputWithWarnings } from "../domain/quickConnect";
 import SerialConnectModal from "./SerialConnectModal";
+import SerialHostDetailsPanel from "./SerialHostDetailsPanel";
 import SnippetsManager from "./SnippetsManager";
 import { ImportVaultDialog } from "./vault/ImportVaultDialog";
 import { Button } from "./ui/button";
@@ -75,6 +76,7 @@ import { TagFilterDropdown } from "./ui/tag-filter-dropdown";
 import { toast } from "./ui/toast";
 
 const LazyProtocolSelectDialog = lazy(() => import("./ProtocolSelectDialog"));
+const LazyConnectionLogsManager = lazy(() => import("./ConnectionLogsManager"));
 
 export type VaultSection = "hosts" | "keys" | "snippets" | "port" | "knownhosts" | "logs";
 
@@ -300,6 +302,19 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
     setIsHostPanelOpen(true);
   }, []);
 
+  const handleDuplicateHost = useCallback((host: Host) => {
+    // Create a copy of the host with a new ID and modified label
+    const duplicatedHost: Host = {
+      ...host,
+      id: crypto.randomUUID(),
+      label: `${host.label} (${t('action.copy')})`,
+      createdAt: Date.now(),
+    };
+    // Open the edit panel with the duplicated host for modification
+    setEditingHost(duplicatedHost);
+    setIsHostPanelOpen(true);
+  }, [t]);
+
   const readTextFile = useCallback(async (file: File): Promise<string> => {
     const buf = await file.arrayBuffer();
     const bytes = new Uint8Array(buf);
@@ -746,7 +761,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
             className={cn(
               "w-full justify-start gap-3 h-10",
               currentSection === "hosts" &&
-              "bg-foreground/5 text-foreground hover:bg-foreground/10 border-border/40",
+              "bg-foreground/10 text-foreground hover:bg-foreground/15 border-border/40",
             )}
             onClick={() => {
               setCurrentSection("hosts");
@@ -760,7 +775,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
             className={cn(
               "w-full justify-start gap-3 h-10",
               currentSection === "keys" &&
-              "bg-foreground/5 text-foreground hover:bg-foreground/10 border-border/40",
+              "bg-foreground/10 text-foreground hover:bg-foreground/15 border-border/40",
             )}
             onClick={() => {
               setCurrentSection("keys");
@@ -773,7 +788,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
             className={cn(
               "w-full justify-start gap-3 h-10",
               currentSection === "port" &&
-              "bg-foreground/5 text-foreground hover:bg-foreground/10 border-border/40",
+              "bg-foreground/10 text-foreground hover:bg-foreground/15 border-border/40",
             )}
             onClick={() => setCurrentSection("port")}
           >
@@ -784,7 +799,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
             className={cn(
               "w-full justify-start gap-3 h-10",
               currentSection === "snippets" &&
-              "bg-foreground/5 text-foreground hover:bg-foreground/10 border-border/40",
+              "bg-foreground/10 text-foreground hover:bg-foreground/15 border-border/40",
             )}
             onClick={() => {
               setCurrentSection("snippets");
@@ -797,7 +812,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
             className={cn(
               "w-full justify-start gap-3 h-10",
               currentSection === "knownhosts" &&
-              "bg-foreground/5 text-foreground hover:bg-foreground/10 border-border/40",
+              "bg-foreground/10 text-foreground hover:bg-foreground/15 border-border/40",
             )}
             onClick={() => setCurrentSection("knownhosts")}
           >
@@ -808,7 +823,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
             className={cn(
               "w-full justify-start gap-3 h-10",
               currentSection === "logs" &&
-              "bg-foreground/5 text-foreground hover:bg-foreground/10 border-border/40",
+              "bg-foreground/10 text-foreground hover:bg-foreground/15 border-border/40",
             )}
             onClick={() => setCurrentSection("logs")}
           >
@@ -1218,18 +1233,23 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                               <ContextMenuItem
                                 onClick={() => handleHostConnect(host)}
                               >
-                                <Plug className="mr-2 h-4 w-4" /> Connect
+                                <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" /> Edit
+                                <Edit2 className="mr-2 h-4 w-4" /> {t('action.edit')}
+                              </ContextMenuItem>
+                              <ContextMenuItem
+                                onClick={() => handleDuplicateHost(host)}
+                              >
+                                <Copy className="mr-2 h-4 w-4" /> {t('action.duplicate')}
                               </ContextMenuItem>
                               <ContextMenuItem
                                 className="text-destructive"
                                 onClick={() => onDeleteHost(host.id)}
                               >
-                                <Trash2 className="mr-2 h-4 w-4" /> Delete
+                                <Trash2 className="mr-2 h-4 w-4" /> {t('action.delete')}
                               </ContextMenuItem>
                             </ContextMenuContent>
                           </ContextMenu>
@@ -1349,19 +1369,21 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
         </div>
         {/* Connection Logs */}
         {currentSection === "logs" && (
-          <ConnectionLogsManager
-            logs={connectionLogs}
-            hosts={hosts}
-            onToggleSaved={onToggleConnectionLogSaved}
-            onDelete={onDeleteConnectionLog}
-            onClearUnsaved={onClearUnsavedConnectionLogs}
-            onOpenLogView={onOpenLogView}
-          />
+          <Suspense fallback={<div className="flex-1 flex items-center justify-center text-muted-foreground">Loading...</div>}>
+            <LazyConnectionLogsManager
+              logs={connectionLogs}
+              hosts={hosts}
+              onToggleSaved={onToggleConnectionLogSaved}
+              onDelete={onDeleteConnectionLog}
+              onClearUnsaved={onClearUnsavedConnectionLogs}
+              onOpenLogView={onOpenLogView}
+            />
+          </Suspense>
         )}
       </div>
 
       {/* Host Details Panel - positioned at VaultView root level for correct top alignment */}
-      {currentSection === "hosts" && isHostPanelOpen && (
+      {currentSection === "hosts" && isHostPanelOpen && editingHost?.protocol !== 'serial' && (
         <HostDetailsPanel
           initialData={editingHost}
           availableKeys={keys}
@@ -1376,8 +1398,10 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
           allHosts={hosts}
           defaultGroup={editingHost ? undefined : selectedGroupPath}
           onSave={(host) => {
+            // Check if host already exists in the list (for updates vs. new/duplicate)
+            const hostExists = hosts.some((h) => h.id === host.id);
             onUpdateHosts(
-              editingHost
+              hostExists
                 ? hosts.map((h) => (h.id === host.id ? host : h))
                 : [...hosts, host],
             );
@@ -1396,6 +1420,31 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
         />
       )}
 
+      {/* Serial Host Details Panel - for editing serial port hosts */}
+      {currentSection === "hosts" && isHostPanelOpen && editingHost?.protocol === 'serial' && (
+        <SerialHostDetailsPanel
+          initialData={editingHost}
+          allTags={allTags}
+          groups={Array.from(
+            new Set([
+              ...customGroups,
+              ...hosts.map((h) => h.group || "General"),
+            ]),
+          )}
+          onSave={(host) => {
+            onUpdateHosts(
+              hosts.map((h) => (h.id === host.id ? host : h)),
+            );
+            setIsHostPanelOpen(false);
+            setEditingHost(null);
+          }}
+          onCancel={() => {
+            setIsHostPanelOpen(false);
+            setEditingHost(null);
+          }}
+        />
+      )}
+
       <Dialog open={isNewFolderOpen} onOpenChange={(open) => {
         setIsNewFolderOpen(open);
         if (!open) {
@@ -1532,6 +1581,9 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
             onConnectSerial(config);
           }
         }}
+        onSaveHost={(host) => {
+          onUpdateHosts([...hosts, host]);
+        }}
       />
     </div>
   );

components/keychain/ImportKeyPanel.tsx

@@ -84,7 +84,6 @@ export const ImportKeyPanel: React.FC<ImportKeyPanelProps> = ({
             <input
                 ref={fileInputRef}
                 type="file"
-                accept=".pem,.key,.pub,.ppk,*"
                 className="hidden"
                 onChange={handleFileImport}
             />

components/port-forwarding/EditPanel.tsx

@@ -12,6 +12,7 @@ import { AsideActionMenu,AsideActionMenuItem,AsidePanel,AsidePanelContent,AsideP
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 import { Label } from '../ui/label';
+import { Switch } from '../ui/switch';
 
 export interface EditPanelProps {
     rule: PortForwardingRule;
@@ -152,6 +153,18 @@ export const EditPanel: React.FC<EditPanelProps> = ({
                         </div>
                     </>
                 )}
+
+                {/* Auto Start Toggle */}
+                <div className="flex items-center justify-between py-2">
+                    <div className="space-y-0.5">
+                        <Label className="text-sm font-medium">{t('pf.form.autoStart')}</Label>
+                        <p className="text-[10px] text-muted-foreground">{t('pf.form.autoStartDesc')}</p>
+                    </div>
+                    <Switch
+                        checked={draft.autoStart ?? false}
+                        onCheckedChange={checked => onDraftChange({ autoStart: checked })}
+                    />
+                </div>
             </AsidePanelContent>
             <AsidePanelFooter className="space-y-2">
                 <Button

components/port-forwarding/NewFormPanel.tsx

@@ -13,6 +13,7 @@ import { AsidePanel,AsidePanelContent,AsidePanelFooter } from '../ui/aside-panel
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 import { Label } from '../ui/label';
+import { Switch } from '../ui/switch';
 import { getTypeLabel } from './utils';
 
 export interface NewFormPanelProps {
@@ -153,6 +154,18 @@ export const NewFormPanel: React.FC<NewFormPanelProps> = ({
                         </div>
                     </>
                 )}
+
+                {/* Auto Start Toggle */}
+                <div className="flex items-center justify-between py-2">
+                    <div className="space-y-0.5">
+                        <Label className="text-sm font-medium">{t('pf.form.autoStart')}</Label>
+                        <p className="text-[10px] text-muted-foreground">{t('pf.form.autoStartDesc')}</p>
+                    </div>
+                    <Switch
+                        checked={draft.autoStart ?? false}
+                        onCheckedChange={checked => onDraftChange({ autoStart: checked })}
+                    />
+                </div>
             </AsidePanelContent>
             <AsidePanelFooter className="space-y-2">
                 <Button

components/settings/FontSelect.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import type { UIFont } from '../../infrastructure/config/uiFonts';
+
+interface FontSelectProps {
+  value: string;
+  fonts: UIFont[];
+  onChange: (value: string) => void;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const FontSelect: React.FC<FontSelectProps> = ({
+  value,
+  fonts,
+  onChange,
+  className,
+  disabled,
+}) => {
+  const selectedFont = fonts.find(f => f.id === value);
+
+  return (
+    <SelectPrimitive.Root value={value} onValueChange={onChange} disabled={disabled}>
+      <SelectPrimitive.Trigger
+        className={cn(
+          'flex h-9 items-center justify-between rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+          className
+        )}
+      >
+        <SelectPrimitive.Value>
+          <span style={{ fontFamily: selectedFont?.family }}>
+            {selectedFont?.name || value}
+          </span>
+        </SelectPrimitive.Value>
+        <SelectPrimitive.Icon asChild>
+          <ChevronDown className="ml-2 h-4 w-4 opacity-50" />
+        </SelectPrimitive.Icon>
+      </SelectPrimitive.Trigger>
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Content
+          className="z-[200000] max-h-80 min-w-[12rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
+          position="popper"
+          sideOffset={4}
+        >
+          <SelectPrimitive.ScrollUpButton className="flex cursor-default items-center justify-center py-1">
+            <ChevronUp className="h-4 w-4" />
+          </SelectPrimitive.ScrollUpButton>
+          <SelectPrimitive.Viewport className="p-1 h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]">
+            {fonts.map((font) => (
+              <SelectPrimitive.Item
+                key={font.id}
+                value={font.id}
+                className="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+              >
+                <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                  <SelectPrimitive.ItemIndicator>
+                    <Check className="h-4 w-4" />
+                  </SelectPrimitive.ItemIndicator>
+                </span>
+                <SelectPrimitive.ItemText>
+                  <span style={{ fontFamily: font.family }}>{font.name}</span>
+                </SelectPrimitive.ItemText>
+              </SelectPrimitive.Item>
+            ))}
+          </SelectPrimitive.Viewport>
+          <SelectPrimitive.ScrollDownButton className="flex cursor-default items-center justify-center py-1">
+            <ChevronDown className="h-4 w-4" />
+          </SelectPrimitive.ScrollDownButton>
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>
+  );
+};
+
+export default FontSelect;

components/settings/TerminalFontSelect.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import type { TerminalFont } from '../../infrastructure/config/fonts';
+
+interface TerminalFontSelectProps {
+  value: string;
+  fonts: TerminalFont[];
+  onChange: (value: string) => void;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const TerminalFontSelect: React.FC<TerminalFontSelectProps> = ({
+  value,
+  fonts,
+  onChange,
+  className,
+  disabled,
+}) => {
+  const selectedFont = fonts.find(f => f.id === value);
+
+  return (
+    <SelectPrimitive.Root value={value} onValueChange={onChange} disabled={disabled}>
+      <SelectPrimitive.Trigger
+        className={cn(
+          'flex h-9 items-center justify-between rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+          className
+        )}
+      >
+        <SelectPrimitive.Value>
+          <span style={{ fontFamily: selectedFont?.family }}>
+            {selectedFont?.name || value}
+          </span>
+        </SelectPrimitive.Value>
+        <SelectPrimitive.Icon asChild>
+          <ChevronDown className="ml-2 h-4 w-4 opacity-50" />
+        </SelectPrimitive.Icon>
+      </SelectPrimitive.Trigger>
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Content
+          className="z-[200000] max-h-80 min-w-[14rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
+          position="popper"
+          sideOffset={4}
+        >
+          <SelectPrimitive.ScrollUpButton className="flex cursor-default items-center justify-center py-1">
+            <ChevronUp className="h-4 w-4" />
+          </SelectPrimitive.ScrollUpButton>
+          <SelectPrimitive.Viewport className="p-1 h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]">
+            {fonts.map((font) => (
+              <SelectPrimitive.Item
+                key={font.id}
+                value={font.id}
+                className="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+              >
+                <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                  <SelectPrimitive.ItemIndicator>
+                    <Check className="h-4 w-4" />
+                  </SelectPrimitive.ItemIndicator>
+                </span>
+                <SelectPrimitive.ItemText>
+                  <span style={{ fontFamily: font.family }}>{font.name}</span>
+                </SelectPrimitive.ItemText>
+              </SelectPrimitive.Item>
+            ))}
+          </SelectPrimitive.Viewport>
+          <SelectPrimitive.ScrollDownButton className="flex cursor-default items-center justify-center py-1">
+            <ChevronDown className="h-4 w-4" />
+          </SelectPrimitive.ScrollDownButton>
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>
+  );
+};
+
+export default TerminalFontSelect;

components/settings/ThemeSelectModal.tsx

@@ -0,0 +1,186 @@
+/**
+ * Theme Select Modal
+ * A modal dialog for selecting terminal themes in settings
+ */
+
+import React, { memo, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { Check, Palette, X } from 'lucide-react';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import { TERMINAL_THEMES, TerminalThemeConfig } from '../../infrastructure/config/terminalThemes';
+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';
+
+interface ThemeSelectModalProps {
+    open: boolean;
+    onClose: () => void;
+    selectedThemeId: string;
+    onSelect: (themeId: string) => void;
+}
+
+export const ThemeSelectModal: React.FC<ThemeSelectModalProps> = ({
+    open,
+    onClose,
+    selectedThemeId,
+    onSelect,
+}) => {
+    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 };
+    }, []);
+
+    // Handle theme selection - select and close
+    const handleThemeSelect = useCallback((themeId: string) => {
+        onSelect(themeId);
+        onClose();
+    }, [onSelect, onClose]);
+
+    // Handle ESC key
+    React.useEffect(() => {
+        if (!open) return;
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') onClose();
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [open, onClose]);
+
+    // Handle backdrop click
+    const handleBackdropClick = useCallback((e: React.MouseEvent) => {
+        if (e.target === e.currentTarget) onClose();
+    }, [onClose]);
+
+    if (!open) return null;
+
+    const modalTitleId = 'theme-select-modal-title';
+
+    const modalContent = (
+        <div
+            className="fixed inset-0 flex items-center justify-center bg-black/60"
+            style={{ zIndex: 99999 }}
+            onClick={handleBackdropClick}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={modalTitleId}
+        >
+            <div
+                className="w-[480px] max-h-[600px] bg-background border border-border rounded-2xl shadow-2xl flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-200"
+                onClick={(e) => e.stopPropagation()}
+            >
+                {/* Header */}
+                <div className="flex items-center justify-between px-5 py-3 shrink-0 border-b border-border">
+                    <div className="flex items-center gap-3">
+                        <div className="w-8 h-8 rounded-lg flex items-center justify-center bg-primary/10">
+                            <Palette size={16} className="text-primary" />
+                        </div>
+                        <h2 id={modalTitleId} className="text-sm font-semibold text-foreground">{t('settings.terminal.themeModal.title')}</h2>
+                    </div>
+                    <button
+                        onClick={onClose}
+                        className="w-8 h-8 rounded-lg flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                        aria-label={t('common.close')}
+                    >
+                        <X size={16} />
+                    </button>
+                </div>
+
+                {/* 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>
+                </div>
+
+                {/* Footer */}
+                <div className="flex justify-end px-5 py-3 shrink-0 border-t border-border bg-muted/20">
+                    <Button
+                        variant="ghost"
+                        onClick={onClose}
+                    >
+                        {t('common.cancel')}
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+
+    // Use Portal to render at document root
+    return createPortal(modalContent, document.body);
+};
+
+export default ThemeSelectModal;

components/settings/tabs/SettingsAppearanceTab.tsx

@@ -2,9 +2,11 @@ import React, { useCallback } from "react";
 import { Check, Moon, Palette, Sun } from "lucide-react";
 import { useI18n } from "../../../application/i18n/I18nProvider";
 import { DARK_UI_THEMES, LIGHT_UI_THEMES } from "../../../infrastructure/config/uiThemes";
+import { useAvailableUIFonts } from "../../../application/state/uiFontStore";
 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";
 
 export default function SettingsAppearanceTab(props: {
   theme: "dark" | "light";
@@ -17,12 +19,15 @@ export default function SettingsAppearanceTab(props: {
   setAccentMode: (mode: "theme" | "custom") => void;
   customAccent: string;
   setCustomAccent: (color: string) => void;
+  uiFontFamilyId: string;
+  setUiFontFamilyId: (fontId: string) => void;
   uiLanguage: string;
   setUiLanguage: (language: string) => void;
   customCSS: string;
   setCustomCSS: (css: string) => void;
 }) {
   const { t } = useI18n();
+  const availableUIFonts = useAvailableUIFonts();
   const {
     theme,
     setTheme,
@@ -34,6 +39,8 @@ export default function SettingsAppearanceTab(props: {
     setAccentMode,
     customAccent,
     setCustomAccent,
+    uiFontFamilyId,
+    setUiFontFamilyId,
     uiLanguage,
     setUiLanguage,
     customCSS,
@@ -130,6 +137,17 @@ export default function SettingsAppearanceTab(props: {
             className="w-40"
           />
         </SettingRow>
+        <SettingRow
+          label={t("settings.appearance.uiFont")}
+          description={t("settings.appearance.uiFont.desc")}
+        >
+          <FontSelect
+            value={uiFontFamilyId}
+            fonts={availableUIFonts}
+            onChange={(v) => setUiFontFamilyId(v)}
+            className="w-48"
+          />
+        </SettingRow>
       </div>
 
       <SectionHeader title={t("settings.appearance.uiTheme")} />

components/settings/tabs/SettingsFileAssociationsTab.tsx

@@ -0,0 +1,290 @@
+/**
+ * SettingsFileAssociationsTab - Manage SFTP file opener associations and behavior
+ */
+import { FileType, Pencil, Trash2 } from "lucide-react";
+import React, { useCallback, useState } from "react";
+import { useI18n } from "../../../application/i18n/I18nProvider";
+import { useSftpFileAssociations } from "../../../application/state/useSftpFileAssociations";
+import { useSettingsState } from "../../../application/state/useSettingsState";
+import type { FileOpenerType, SystemAppInfo } from "../../../lib/sftpFileUtils";
+import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
+import { cn } from "../../../lib/utils";
+import { Button } from "../../ui/button";
+import { Label } from "../../ui/label";
+import { SectionHeader, SettingsTabContent } from "../settings-ui";
+
+const getOpenerLabel = (
+  openerType: FileOpenerType,
+  systemApp: SystemAppInfo | undefined,
+  t: (key: string) => string
+): string => {
+  if (openerType === 'builtin-editor') {
+    return t('sftp.opener.builtInEditor');
+  } else if (openerType === 'system-app' && systemApp) {
+    return systemApp.name;
+  }
+  return openerType;
+};
+
+export default function SettingsFileAssociationsTab() {
+  const { t } = useI18n();
+  const { getAllAssociations, removeAssociation, setOpenerForExtension } = useSftpFileAssociations();
+  const { sftpDoubleClickBehavior, setSftpDoubleClickBehavior, sftpAutoSync, setSftpAutoSync, sftpShowHiddenFiles, setSftpShowHiddenFiles } = useSettingsState();
+  const associations = getAllAssociations();
+  const [editingExtension, setEditingExtension] = useState<string | null>(null);
+
+  // Debug log for Settings page
+  console.log('[SettingsFileAssociationsTab] Rendering with', associations.length, 'associations:', associations);
+
+  const handleRemove = useCallback((extension: string) => {
+    if (confirm(t('settings.sftpFileAssociations.removeConfirm', { ext: extension === 'file' ? t('sftp.opener.noExtension') : extension }))) {
+      removeAssociation(extension);
+    }
+  }, [removeAssociation, t]);
+
+  const handleEdit = useCallback(async (extension: string) => {
+    setEditingExtension(extension);
+    try {
+      const bridge = netcattyBridge.get();
+      if (!bridge?.selectApplication) {
+        return;
+      }
+      const result = await bridge.selectApplication();
+      if (result) {
+        setOpenerForExtension(extension, 'system-app', { path: result.path, name: result.name });
+      }
+    } catch (e) {
+      console.error('Failed to select application:', e);
+    } finally {
+      setEditingExtension(null);
+    }
+  }, [setOpenerForExtension]);
+
+  return (
+    <SettingsTabContent value="file-associations">
+      <div className="space-y-8">
+        {/* Double-click behavior section */}
+        <div className="space-y-4">
+          <SectionHeader title={t('settings.sftp.doubleClickBehavior')} />
+          <p className="text-sm text-muted-foreground">
+            {t('settings.sftp.doubleClickBehavior.desc')}
+          </p>
+          <div className="space-y-3">
+            <button
+              onClick={() => setSftpDoubleClickBehavior('open')}
+              className={cn(
+                "w-full text-left p-4 rounded-lg border-2 transition-colors",
+                sftpDoubleClickBehavior === 'open'
+                  ? "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",
+                  sftpDoubleClickBehavior === 'open'
+                    ? "border-primary"
+                    : "border-muted-foreground/30"
+                )}>
+                  {sftpDoubleClickBehavior === 'open' && (
+                    <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.doubleClickBehavior.open')}
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    {t('settings.sftp.doubleClickBehavior.openDesc')}
+                  </p>
+                </div>
+              </div>
+            </button>
+            <button
+              onClick={() => setSftpDoubleClickBehavior('transfer')}
+              className={cn(
+                "w-full text-left p-4 rounded-lg border-2 transition-colors",
+                sftpDoubleClickBehavior === 'transfer'
+                  ? "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",
+                  sftpDoubleClickBehavior === 'transfer'
+                    ? "border-primary"
+                    : "border-muted-foreground/30"
+                )}>
+                  {sftpDoubleClickBehavior === 'transfer' && (
+                    <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.doubleClickBehavior.transfer')}
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    {t('settings.sftp.doubleClickBehavior.transferDesc')}
+                  </p>
+                </div>
+              </div>
+            </button>
+          </div>
+        </div>
+
+        {/* Auto-sync section */}
+        <div className="space-y-4">
+          <SectionHeader title={t('settings.sftp.autoSync')} />
+          <p className="text-sm text-muted-foreground">
+            {t('settings.sftp.autoSync.desc')}
+          </p>
+          <button
+            onClick={() => setSftpAutoSync(!sftpAutoSync)}
+            className={cn(
+              "w-full text-left p-4 rounded-lg border-2 transition-colors",
+              sftpAutoSync
+                ? "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 border-2 flex items-center justify-center mt-0.5 shrink-0",
+                sftpAutoSync
+                  ? "border-primary bg-primary"
+                  : "border-muted-foreground/30"
+              )}>
+                {sftpAutoSync && (
+                  <svg className="h-3 w-3 text-primary-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                  </svg>
+                )}
+              </div>
+              <div className="space-y-1">
+                <Label className="font-medium cursor-pointer">
+                  {t('settings.sftp.autoSync.enable')}
+                </Label>
+                <p className="text-sm text-muted-foreground">
+                  {t('settings.sftp.autoSync.enableDesc')}
+                </p>
+              </div>
+            </div>
+          </button>
+        </div>
+
+        {/* Show hidden files section */}
+        <div className="space-y-4">
+          <SectionHeader title={t('settings.sftp.showHiddenFiles')} />
+          <p className="text-sm text-muted-foreground">
+            {t('settings.sftp.showHiddenFiles.desc')}
+          </p>
+          <button
+            onClick={() => setSftpShowHiddenFiles(!sftpShowHiddenFiles)}
+            className={cn(
+              "w-full text-left p-4 rounded-lg border-2 transition-colors",
+              sftpShowHiddenFiles
+                ? "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 border-2 flex items-center justify-center mt-0.5 shrink-0",
+                sftpShowHiddenFiles
+                  ? "border-primary bg-primary"
+                  : "border-muted-foreground/30"
+              )}>
+                {sftpShowHiddenFiles && (
+                  <svg className="h-3 w-3 text-primary-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                  </svg>
+                )}
+              </div>
+              <div className="space-y-1">
+                <Label className="font-medium cursor-pointer">
+                  {t('settings.sftp.showHiddenFiles.enable')}
+                </Label>
+                <p className="text-sm text-muted-foreground">
+                  {t('settings.sftp.showHiddenFiles.enableDesc')}
+                </p>
+              </div>
+            </div>
+          </button>
+        </div>
+
+        {/* File associations section */}
+        <div className="space-y-4">
+          <SectionHeader title={t('settings.sftpFileAssociations.title')} />
+          <p className="text-sm text-muted-foreground">
+            {t('settings.sftpFileAssociations.desc')}
+          </p>
+
+        {associations.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+            <FileType size={48} strokeWidth={1} className="mb-4 opacity-50" />
+            <p className="text-sm">{t('settings.sftpFileAssociations.noAssociations')}</p>
+          </div>
+        ) : (
+          <div className="border border-border rounded-md overflow-hidden">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="bg-muted/50 border-b border-border">
+                  <th className="text-left px-4 py-2 font-medium">
+                    {t('settings.sftpFileAssociations.extension')}
+                  </th>
+                  <th className="text-left px-4 py-2 font-medium">
+                    {t('settings.sftpFileAssociations.application')}
+                  </th>
+                  <th className="text-right px-4 py-2 font-medium w-28">
+                    {/* Actions */}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {associations.map(({ extension, openerType, systemApp }) => (
+                  <tr key={extension} className="border-b border-border last:border-b-0 hover:bg-muted/30">
+                    <td className="px-4 py-3">
+                      <code className="text-xs bg-muted px-1.5 py-0.5 rounded">
+                        {extension === 'file' ? t('sftp.opener.noExtension') : `.${extension}`}
+                      </code>
+                    </td>
+                    <td className="px-4 py-3 text-muted-foreground">
+                      {openerType === 'system-app' && systemApp ? (
+                        <span title={systemApp.path}>{systemApp.name}</span>
+                      ) : (
+                        getOpenerLabel(openerType, systemApp, t)
+                      )}
+                    </td>
+                    <td className="px-4 py-3 text-right space-x-1">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7"
+                        onClick={() => handleEdit(extension)}
+                        disabled={editingExtension === extension}
+                        title={t('common.edit')}
+                      >
+                        <Pencil size={14} />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-destructive hover:text-destructive hover:bg-destructive/10"
+                        onClick={() => handleRemove(extension)}
+                        title={t('settings.sftpFileAssociations.remove')}
+                      >
+                        <Trash2 size={14} />
+                      </Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+        </div>
+      </div>
+    </SettingsTabContent>
+  );
+}

components/settings/tabs/SettingsSystemTab.tsx

@@ -0,0 +1,304 @@
+/**
+ * Settings System Tab - System information, temp file management, and session logs
+ */
+import { FileText, FolderOpen, HardDrive, RefreshCw, Trash2 } from "lucide-react";
+import React, { useCallback, useEffect, useState } from "react";
+import { useI18n } from "../../../application/i18n/I18nProvider";
+import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
+import { SessionLogFormat } from "../../../domain/models";
+import { TabsContent } from "../../ui/tabs";
+import { Button } from "../../ui/button";
+import { Toggle, Select, SettingRow } from "../settings-ui";
+
+interface TempDirInfo {
+  path: string;
+  fileCount: number;
+  totalSize: number;
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+
+interface SettingsSystemTabProps {
+  sessionLogsEnabled: boolean;
+  setSessionLogsEnabled: (enabled: boolean) => void;
+  sessionLogsDir: string;
+  setSessionLogsDir: (dir: string) => void;
+  sessionLogsFormat: SessionLogFormat;
+  setSessionLogsFormat: (format: SessionLogFormat) => void;
+}
+
+const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
+  sessionLogsEnabled,
+  setSessionLogsEnabled,
+  sessionLogsDir,
+  setSessionLogsDir,
+  sessionLogsFormat,
+  setSessionLogsFormat,
+}) => {
+  const { t } = useI18n();
+
+  const [tempDirInfo, setTempDirInfo] = useState<TempDirInfo | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isClearing, setIsClearing] = useState(false);
+  const [clearResult, setClearResult] = useState<{ deletedCount: number; failedCount: number } | null>(null);
+
+  const loadTempDirInfo = useCallback(async () => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.getTempDirInfo) return;
+
+    setIsLoading(true);
+    try {
+      const info = await bridge.getTempDirInfo();
+      setTempDirInfo(info);
+    } catch (err) {
+      console.error("[SettingsSystemTab] Failed to get temp dir info:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadTempDirInfo();
+  }, [loadTempDirInfo]);
+
+  const handleClearTempFiles = useCallback(async () => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.clearTempDir) return;
+
+    setIsClearing(true);
+    setClearResult(null);
+    try {
+      const result = await bridge.clearTempDir();
+      setClearResult(result);
+      // Refresh info after clearing
+      await loadTempDirInfo();
+    } catch (err) {
+      console.error("[SettingsSystemTab] Failed to clear temp dir:", err);
+    } finally {
+      setIsClearing(false);
+    }
+  }, [loadTempDirInfo]);
+
+  const handleOpenTempDir = useCallback(async () => {
+    const bridge = netcattyBridge.get();
+    if (!tempDirInfo?.path || !bridge?.openTempDir) return;
+    await bridge.openTempDir();
+  }, [tempDirInfo]);
+
+  const handleSelectSessionLogsDir = useCallback(async () => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.selectSessionLogsDir) return;
+
+    try {
+      const result = await bridge.selectSessionLogsDir();
+      if (result.success && result.directory) {
+        setSessionLogsDir(result.directory);
+      }
+    } catch (err) {
+      console.error("[SettingsSystemTab] Failed to select directory:", err);
+    }
+  }, [setSessionLogsDir]);
+
+  const handleOpenSessionLogsDir = useCallback(async () => {
+    const bridge = netcattyBridge.get();
+    if (!sessionLogsDir || !bridge?.openSessionLogsDir) return;
+
+    try {
+      await bridge.openSessionLogsDir(sessionLogsDir);
+    } catch (err) {
+      console.error("[SettingsSystemTab] Failed to open directory:", err);
+    }
+  }, [sessionLogsDir]);
+
+  const formatOptions = [
+    { value: "txt", label: t("settings.sessionLogs.formatTxt") },
+    { value: "raw", label: t("settings.sessionLogs.formatRaw") },
+    { value: "html", label: t("settings.sessionLogs.formatHtml") },
+  ];
+
+  return (
+    <TabsContent
+      value="system"
+      className="data-[state=inactive]:hidden h-full flex flex-col"
+    >
+      <div className="flex-1 overflow-y-auto overflow-x-hidden px-8 py-6">
+        <div className="max-w-2xl space-y-8">
+          {/* Header */}
+          <div>
+            <h2 className="text-xl font-semibold">{t("settings.system.title")}</h2>
+            <p className="text-sm text-muted-foreground mt-1">
+              {t("settings.system.description")}
+            </p>
+          </div>
+
+          {/* Temp Directory Section */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <HardDrive size={18} className="text-muted-foreground" />
+              <h3 className="text-base font-medium">{t("settings.system.tempDirectory")}</h3>
+            </div>
+
+            <div className="bg-muted/30 rounded-lg p-4 space-y-3">
+              {/* Path */}
+              <div className="flex items-start justify-between gap-4">
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm text-muted-foreground">{t("settings.system.location")}</p>
+                  <p className="text-sm font-mono mt-1 break-all">
+                    {isLoading ? "..." : (tempDirInfo?.path ?? "-")}
+                  </p>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="shrink-0"
+                  onClick={handleOpenTempDir}
+                  disabled={!tempDirInfo?.path}
+                  title={t("settings.system.openFolder")}
+                >
+                  <FolderOpen size={16} />
+                </Button>
+              </div>
+
+              {/* Stats */}
+              <div className="flex items-center gap-6 text-sm">
+                <div>
+                  <span className="text-muted-foreground">{t("settings.system.fileCount")}:</span>{" "}
+                  <span className="font-medium">
+                    {isLoading ? "..." : (tempDirInfo?.fileCount ?? 0)}
+                  </span>
+                </div>
+                <div>
+                  <span className="text-muted-foreground">{t("settings.system.totalSize")}:</span>{" "}
+                  <span className="font-medium">
+                    {isLoading ? "..." : formatBytes(tempDirInfo?.totalSize ?? 0)}
+                  </span>
+                </div>
+              </div>
+
+              {/* Actions */}
+              <div className="flex items-center gap-2 pt-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={loadTempDirInfo}
+                  disabled={isLoading}
+                  className="gap-1.5"
+                >
+                  <RefreshCw size={14} className={isLoading ? "animate-spin" : ""} />
+                  {t("settings.system.refresh")}
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleClearTempFiles}
+                  disabled={isClearing || (tempDirInfo?.fileCount ?? 0) === 0}
+                  className="gap-1.5 text-destructive hover:text-destructive hover:bg-destructive/10"
+                >
+                  <Trash2 size={14} />
+                  {isClearing ? t("settings.system.clearing") : t("settings.system.clearTempFiles")}
+                </Button>
+              </div>
+
+              {/* Clear Result */}
+              {clearResult && (
+                <p className="text-sm text-muted-foreground">
+                  {t("settings.system.clearResult", {
+                    deleted: clearResult.deletedCount,
+                    failed: clearResult.failedCount,
+                  })}
+                </p>
+              )}
+            </div>
+
+            <p className="text-xs text-muted-foreground">
+              {t("settings.system.tempDirectoryHint")}
+            </p>
+          </div>
+
+          {/* Session Logs Section */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <FileText size={18} className="text-muted-foreground" />
+              <h3 className="text-base font-medium">{t("settings.sessionLogs.title")}</h3>
+            </div>
+
+            <div className="bg-muted/30 rounded-lg p-4 space-y-4">
+              {/* Enable Toggle */}
+              <SettingRow
+                label={t("settings.sessionLogs.enableAutoSave")}
+                description={t("settings.sessionLogs.enableAutoSaveDesc")}
+              >
+                <Toggle
+                  checked={sessionLogsEnabled}
+                  onChange={setSessionLogsEnabled}
+                />
+              </SettingRow>
+
+              {/* Directory Selection */}
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium">{t("settings.sessionLogs.directory")}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="flex-1 min-w-0">
+                    <div className="bg-background border border-input rounded-md px-3 py-2 text-sm font-mono truncate">
+                      {sessionLogsDir || t("settings.sessionLogs.noDirectory")}
+                    </div>
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleSelectSessionLogsDir}
+                    className="shrink-0"
+                  >
+                    {t("settings.sessionLogs.browse")}
+                  </Button>
+                  {sessionLogsDir && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={handleOpenSessionLogsDir}
+                      className="shrink-0"
+                      title={t("settings.sessionLogs.openFolder")}
+                    >
+                      <FolderOpen size={16} />
+                    </Button>
+                  )}
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  {t("settings.sessionLogs.directoryHint")}
+                </p>
+              </div>
+
+              {/* Format Selection */}
+              <SettingRow
+                label={t("settings.sessionLogs.format")}
+                description={t("settings.sessionLogs.formatDesc")}
+              >
+                <Select
+                  value={sessionLogsFormat}
+                  options={formatOptions}
+                  onChange={(val) => setSessionLogsFormat(val as SessionLogFormat)}
+                  className="w-32"
+                  disabled={!sessionLogsEnabled}
+                />
+              </SettingRow>
+            </div>
+
+            <p className="text-xs text-muted-foreground">
+              {t("settings.sessionLogs.hint")}
+            </p>
+          </div>
+        </div>
+      </div>
+    </TabsContent>
+  );
+};
+
+export default SettingsSystemTab;

components/settings/tabs/SettingsTerminalTab.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { AlertCircle, Check, Minus, Plus, RotateCcw } from "lucide-react";
+import React, { useCallback, useEffect, useState, useMemo } from "react";
+import { AlertCircle, ChevronRight, Minus, Plus, RotateCcw } from "lucide-react";
 import type {
   CursorShape,
   LinkModifier,
@@ -9,65 +9,64 @@ import type {
 } from "../../../domain/models";
 import { DEFAULT_KEYWORD_HIGHLIGHT_RULES } from "../../../domain/models";
 import { useI18n } from "../../../application/i18n/I18nProvider";
-import { TERMINAL_FONTS, MAX_FONT_SIZE, MIN_FONT_SIZE } from "../../../infrastructure/config/fonts";
+import { MAX_FONT_SIZE, MIN_FONT_SIZE, type TerminalFont } from "../../../infrastructure/config/fonts";
 import { TERMINAL_THEMES } from "../../../infrastructure/config/terminalThemes";
 import { cn } from "../../../lib/utils";
 import { Button } from "../../ui/button";
 import { Input } from "../../ui/input";
 import { Label } from "../../ui/label";
 import { SectionHeader, Select, SettingsTabContent, SettingRow, Toggle } from "../settings-ui";
+import { ThemeSelectModal } from "../ThemeSelectModal";
+import { TerminalFontSelect } from "../TerminalFontSelect";
 
-// Helper: render terminal preview
-const renderTerminalPreview = (theme: (typeof TERMINAL_THEMES)[0]) => {
+// Theme preview button component
+const ThemePreviewButton: React.FC<{
+  theme: (typeof TERMINAL_THEMES)[0];
+  onClick: () => void;
+  buttonLabel: string;
+}> = ({ theme, onClick, buttonLabel }) => {
   const c = theme.colors;
-  const lines = [
-    { prompt: "~", cmd: "ssh prod-server", color: c.foreground },
-    { prompt: "prod", cmd: "ls -la", color: c.green },
-    { prompt: "prod", cmd: "cat config.json", color: c.cyan },
-  ];
   return (
-    <div
-      className="font-mono text-[9px] leading-tight p-1.5 rounded overflow-hidden h-full"
-      style={{ backgroundColor: c.background, color: c.foreground }}
+    <button
+      onClick={onClick}
+      className={cn(
+        "w-full flex items-center gap-4 p-3 rounded-lg border bg-card hover:bg-accent/50 transition-all text-left",
+      )}
     >
-      {lines.map((l, i) => (
-        <div key={i} className="flex gap-1 truncate">
-          <span style={{ color: c.blue }}>{l.prompt}</span>
-          <span style={{ color: c.magenta }}>$</span>
-          <span style={{ color: l.color }}>{l.cmd}</span>
+      {/* Theme preview swatch */}
+      <div
+        className="w-20 h-14 rounded-lg flex-shrink-0 flex flex-col justify-center items-start pl-2 gap-0.5 border border-border/50"
+        style={{ backgroundColor: c.background }}
+      >
+        <div className="flex gap-1 items-center">
+          <span className="font-mono text-[8px]" style={{ color: c.green }}>$</span>
+          <span className="font-mono text-[8px]" style={{ color: c.blue }}>ls</span>
+        </div>
+        <div className="flex gap-0.5">
+          <div className="h-1 w-3 rounded-full" style={{ backgroundColor: c.cyan }} />
+          <div className="h-1 w-4 rounded-full" style={{ backgroundColor: c.magenta }} />
+        </div>
+        <div className="flex gap-1 items-center">
+          <span className="font-mono text-[8px]" style={{ color: c.green }}>$</span>
+          <span className="inline-block w-1.5 h-2 animate-pulse" style={{ backgroundColor: c.cursor }} />
         </div>
-      ))}
-      <div className="flex gap-1">
-        <span style={{ color: c.blue }}>~</span>
-        <span style={{ color: c.magenta }}>$</span>
-        <span className="inline-block w-1.5 h-2.5 animate-pulse" style={{ backgroundColor: c.cursor }} />
       </div>
-    </div>
+      
+      {/* Theme info */}
+      <div className="flex-1 min-w-0">
+        <div className="text-sm font-medium">{theme.name}</div>
+        <div className="text-xs text-muted-foreground capitalize">{theme.type}</div>
+      </div>
+      
+      {/* Action button area */}
+      <div className="flex items-center gap-2 text-muted-foreground">
+        <span className="text-xs">{buttonLabel}</span>
+        <ChevronRight size={16} />
+      </div>
+    </button>
   );
 };
 
-const TerminalThemeCard: React.FC<{
-  theme: (typeof TERMINAL_THEMES)[0];
-  active: boolean;
-  onClick: () => void;
-}> = ({ theme, active, onClick }) => (
-  <button
-    onClick={onClick}
-    className={cn(
-      "relative flex flex-col rounded-lg border-2 transition-all overflow-hidden text-left",
-      active ? "border-primary ring-2 ring-primary/20" : "border-border hover:border-primary/50",
-    )}
-  >
-    <div className="h-16">{renderTerminalPreview(theme)}</div>
-    <div className="px-2 py-1.5 text-xs font-medium border-t bg-card">{theme.name}</div>
-    {active && (
-      <div className="absolute top-1 right-1 w-4 h-4 bg-primary rounded-full flex items-center justify-center">
-        <Check size={10} className="text-primary-foreground" />
-      </div>
-    )}
-  </button>
-);
-
 export default function SettingsTerminalTab(props: {
   terminalThemeId: string;
   setTerminalThemeId: (id: string) => void;
@@ -80,6 +79,7 @@ export default function SettingsTerminalTab(props: {
     key: K,
     value: TerminalSettings[K],
   ) => void;
+  availableFonts: TerminalFont[];
 }) {
   const {
     terminalThemeId,
@@ -90,6 +90,7 @@ export default function SettingsTerminalTab(props: {
     setTerminalFontSize,
     terminalSettings,
     updateTerminalSetting,
+    availableFonts,
   } = props;
   const { t } = useI18n();
 
@@ -97,6 +98,12 @@ export default function SettingsTerminalTab(props: {
   const [defaultShell, setDefaultShell] = useState<string>("");
   const [shellValidation, setShellValidation] = useState<{ valid: boolean; message?: string } | null>(null);
   const [dirValidation, setDirValidation] = useState<{ valid: boolean; message?: string } | null>(null);
+  const [themeModalOpen, setThemeModalOpen] = useState(false);
+
+  // Get current selected theme
+  const currentTheme = useMemo(() => {
+    return TERMINAL_THEMES.find(t => t.id === terminalThemeId) || TERMINAL_THEMES[0];
+  }, [terminalThemeId]);
 
   // Fetch default shell on mount
   useEffect(() => {
@@ -182,16 +189,18 @@ export default function SettingsTerminalTab(props: {
   return (
     <SettingsTabContent value="terminal">
       <SectionHeader title={t("settings.terminal.section.theme")} />
-      <div className="grid grid-cols-2 gap-3">
-        {TERMINAL_THEMES.map((t) => (
-          <TerminalThemeCard
-            key={t.id}
-            theme={t}
-            active={terminalThemeId === t.id}
-            onClick={() => setTerminalThemeId(t.id)}
-          />
-        ))}
-      </div>
+      <ThemePreviewButton
+        theme={currentTheme}
+        onClick={() => setThemeModalOpen(true)}
+        buttonLabel={t("settings.terminal.theme.selectButton")}
+      />
+      
+      <ThemeSelectModal
+        open={themeModalOpen}
+        onClose={() => setThemeModalOpen(false)}
+        selectedThemeId={terminalThemeId}
+        onSelect={setTerminalThemeId}
+      />
 
       <SectionHeader title={t("settings.terminal.section.font")} />
       <div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
@@ -199,11 +208,11 @@ export default function SettingsTerminalTab(props: {
           label={t("settings.terminal.font.family")}
           description={t("settings.terminal.font.family.desc")}
         >
-          <Select
+          <TerminalFontSelect
             value={terminalFontFamilyId}
-            options={TERMINAL_FONTS.map((f) => ({ value: f.id, label: f.name }))}
+            fonts={availableFonts}
             onChange={(id) => setTerminalFontFamilyId(id)}
-            className="w-40"
+            className="w-48"
           />
         </SettingRow>
 
@@ -578,6 +587,84 @@ export default function SettingsTerminalTab(props: {
           </div>
         </SettingRow>
       </div>
+
+      <SectionHeader title={t("settings.terminal.section.connection")} />
+      <div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
+        <SettingRow
+          label={t("settings.terminal.connection.keepaliveInterval")}
+          description={t("settings.terminal.connection.keepaliveInterval.desc")}
+        >
+          <Input
+            type="number"
+            min={0}
+            max={3600}
+            value={terminalSettings.keepaliveInterval}
+            onChange={(e) => {
+              const val = parseInt(e.target.value) || 0;
+              if (val >= 0 && val <= 3600) {
+                updateTerminalSetting("keepaliveInterval", val);
+              }
+            }}
+            className="w-24"
+          />
+        </SettingRow>
+      </div>
+
+      <SectionHeader title={t("settings.terminal.section.serverStats")} />
+      <div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
+        <SettingRow
+          label={t("settings.terminal.serverStats.show")}
+          description={t("settings.terminal.serverStats.show.desc")}
+        >
+          <Toggle
+            checked={terminalSettings.showServerStats}
+            onChange={(v) => updateTerminalSetting("showServerStats", v)}
+          />
+        </SettingRow>
+
+        {terminalSettings.showServerStats && (
+          <SettingRow
+            label={t("settings.terminal.serverStats.refreshInterval")}
+            description={t("settings.terminal.serverStats.refreshInterval.desc")}
+          >
+            <div className="flex items-center gap-2">
+              <Input
+                type="number"
+                min={5}
+                max={300}
+                value={terminalSettings.serverStatsRefreshInterval}
+                onChange={(e) => {
+                  const val = parseInt(e.target.value) || 5;
+                  if (val >= 5 && val <= 300) {
+                    updateTerminalSetting("serverStatsRefreshInterval", val);
+                  }
+                }}
+                className="w-20"
+              />
+              <span className="text-sm text-muted-foreground">{t("settings.terminal.serverStats.seconds")}</span>
+            </div>
+          </SettingRow>
+        )}
+      </div>
+
+      <SectionHeader title={t("settings.terminal.section.rendering")} />
+      <div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
+        <SettingRow
+          label={t("settings.terminal.rendering.renderer")}
+          description={t("settings.terminal.rendering.renderer.desc")}
+        >
+          <Select
+            value={terminalSettings.rendererType}
+            options={[
+              { value: "auto", label: t("settings.terminal.rendering.auto") },
+              { value: "webgl", label: "WebGL" },
+              { value: "canvas", label: "Canvas" },
+            ]}
+            onChange={(v) => updateTerminalSetting("rendererType", v as "auto" | "webgl" | "canvas")}
+            className="w-32"
+          />
+        </SettingRow>
+      </div>
     </SettingsTabContent>
   );
 }

components/sftp-modal/SftpModalDialogs.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+import { Loader2 } from "lucide-react";
+import { Button } from "../ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog";
+import { Input } from "../ui/input";
+import type { RemoteFile } from "../../types";
+
+interface PermissionsState {
+  owner: { read: boolean; write: boolean; execute: boolean };
+  group: { read: boolean; write: boolean; execute: boolean };
+  others: { read: boolean; write: boolean; execute: boolean };
+}
+
+interface SftpModalDialogsProps {
+  t: (key: string, params?: Record<string, unknown>) => string;
+  showRenameDialog: boolean;
+  setShowRenameDialog: (open: boolean) => void;
+  renameTarget: RemoteFile | null;
+  renameName: string;
+  setRenameName: (value: string) => void;
+  handleRename: () => void;
+  isRenaming: boolean;
+  showPermissionsDialog: boolean;
+  setShowPermissionsDialog: (open: boolean) => void;
+  permissionsTarget: RemoteFile | null;
+  permissions: PermissionsState;
+  togglePermission: (role: "owner" | "group" | "others", perm: "read" | "write" | "execute") => void;
+  getOctalPermissions: () => string;
+  getSymbolicPermissions: () => string;
+  handleSavePermissions: () => void;
+  isChangingPermissions: boolean;
+}
+
+export const SftpModalDialogs: React.FC<SftpModalDialogsProps> = ({
+  t,
+  showRenameDialog,
+  setShowRenameDialog,
+  renameTarget,
+  renameName,
+  setRenameName,
+  handleRename,
+  isRenaming,
+  showPermissionsDialog,
+  setShowPermissionsDialog,
+  permissionsTarget,
+  permissions,
+  togglePermission,
+  getOctalPermissions,
+  getSymbolicPermissions,
+  handleSavePermissions,
+  isChangingPermissions,
+}) => (
+  <>
+    <Dialog open={showRenameDialog} onOpenChange={setShowRenameDialog}>
+      <DialogContent className="sm:max-w-[400px]">
+        <DialogHeader>
+          <DialogTitle>{t("sftp.rename.title")}</DialogTitle>
+          <DialogDescription className="truncate">
+            {renameTarget?.name}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          <Input
+            value={renameName}
+            onChange={(e) => setRenameName(e.target.value)}
+            placeholder={t("sftp.rename.placeholder")}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") handleRename();
+            }}
+            autoFocus
+          />
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setShowRenameDialog(false)}>
+            {t("common.cancel")}
+          </Button>
+          <Button onClick={handleRename} disabled={isRenaming || !renameName.trim()}>
+            {isRenaming ? <Loader2 size={14} className="mr-2 animate-spin" /> : null}
+            {t("common.apply")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+    <Dialog open={showPermissionsDialog} onOpenChange={setShowPermissionsDialog}>
+      <DialogContent className="sm:max-w-[400px]">
+        <DialogHeader>
+          <DialogTitle>{t("sftp.permissions.title")}</DialogTitle>
+          <DialogDescription className="truncate">
+            {permissionsTarget?.name}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          <div className="space-y-3">
+            {(["owner", "group", "others"] as const).map((role) => (
+              <div key={role} className="flex items-center gap-4">
+                <div className="w-16 text-sm font-medium">
+                  {t(`sftp.permissions.${role}`)}
+                </div>
+                <div className="flex gap-3">
+                  {(["read", "write", "execute"] as const).map((perm) => (
+                    <label key={perm} className="flex items-center gap-1.5 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={permissions[role][perm]}
+                        onChange={() => togglePermission(role, perm)}
+                        className="rounded border-border"
+                      />
+                      <span className="text-xs">
+                        {perm === "read" ? "R" : perm === "write" ? "W" : "X"}
+                      </span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="flex items-center justify-between pt-2 border-t border-border/60">
+            <div className="text-xs text-muted-foreground">
+              {t("sftp.permissions.octal")}: <span className="font-mono text-foreground">{getOctalPermissions()}</span>
+            </div>
+            <div className="text-xs text-muted-foreground">
+              {t("sftp.permissions.symbolic")}: <span className="font-mono text-foreground">{getSymbolicPermissions()}</span>
+            </div>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setShowPermissionsDialog(false)}>
+            {t("common.cancel")}
+          </Button>
+          <Button onClick={handleSavePermissions} disabled={isChangingPermissions}>
+            {isChangingPermissions ? <Loader2 size={14} className="mr-2 animate-spin" /> : null}
+            {t("common.apply")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  </>
+);

components/sftp-modal/SftpModalFileList.tsx

@@ -0,0 +1,425 @@
+import React from "react";
+import { Download, Edit2, Folder, FolderOpen, Link, Loader2, MoreHorizontal, Plus, RefreshCw, Shield, Trash2, Upload } from "lucide-react";
+import { cn } from "../../lib/utils";
+import type { RemoteFile } from "../../types";
+import { isKnownBinaryFile } from "../../lib/sftpFileUtils";
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger } from "../ui/context-menu";
+import { Button } from "../ui/button";
+import { getFileIcon } from "./fileIcons";
+
+interface VisibleRow {
+  file: RemoteFile;
+  index: number;
+  top: number;
+}
+
+interface SftpModalFileListProps {
+  t: (key: string, params?: Record<string, unknown>) => string;
+  currentPath: string;
+  isLocalSession: boolean;
+  files: RemoteFile[];
+  selectedFiles: Set<string>;
+  dragActive: boolean;
+  loading: boolean;
+  loadingTextContent: boolean;
+  reconnecting: boolean;
+  resolvedLocale: string | undefined;
+  columnWidths: { name: number; size: number; modified: number; actions: number };
+  sortField: "name" | "size" | "modified";
+  sortOrder: "asc" | "desc";
+  shouldVirtualize: boolean;
+  totalHeight: number;
+  visibleRows: VisibleRow[];
+  fileListRef: React.RefObject<HTMLDivElement>;
+  inputRef: React.RefObject<HTMLInputElement>;
+  handleSort: (field: "name" | "size" | "modified") => void;
+  handleResizeStart: (field: string, e: React.MouseEvent) => void;
+  handleFileListScroll: (e: React.UIEvent<HTMLDivElement>) => void;
+  handleDrag: (e: React.DragEvent) => void;
+  handleDrop: (e: React.DragEvent) => void;
+  handleFileClick: (file: RemoteFile, index: number, e: React.MouseEvent) => void;
+  handleFileDoubleClick: (file: RemoteFile) => void;
+  handleDownload: (file: RemoteFile) => void;
+  handleDelete: (file: RemoteFile) => void;
+  handleOpenFile: (file: RemoteFile) => void;
+  openFileOpenerDialog: (file: RemoteFile) => void;
+  handleEditFile: (file: RemoteFile) => void;
+  openRenameDialog: (file: RemoteFile) => void;
+  openPermissionsDialog: (file: RemoteFile) => void;
+  handleNavigate: (path: string) => void;
+  handleCreateFolder: () => void;
+  handleCreateFile: () => void;
+  handleDownloadSelected: () => void;
+  handleDeleteSelected: () => void;
+  loadFiles: (path: string, options?: { force?: boolean }) => void;
+  formatBytes: (bytes: number | string) => string;
+  formatDate: (dateStr: string | number | undefined, locale?: string) => string;
+}
+
+export const SftpModalFileList: React.FC<SftpModalFileListProps> = ({
+  t,
+  currentPath,
+  isLocalSession,
+  files,
+  selectedFiles,
+  dragActive,
+  loading,
+  loadingTextContent,
+  reconnecting,
+  resolvedLocale,
+  columnWidths,
+  sortField,
+  sortOrder,
+  shouldVirtualize,
+  totalHeight,
+  visibleRows,
+  fileListRef,
+  inputRef,
+  handleSort,
+  handleResizeStart,
+  handleFileListScroll,
+  handleDrag,
+  handleDrop,
+  handleFileClick,
+  handleFileDoubleClick,
+  handleDownload,
+  handleDelete,
+  handleOpenFile,
+  openFileOpenerDialog,
+  handleEditFile,
+  openRenameDialog,
+  openPermissionsDialog,
+  handleNavigate,
+  handleCreateFolder,
+  handleCreateFile,
+  handleDownloadSelected,
+  handleDeleteSelected,
+  loadFiles,
+  formatBytes,
+  formatDate,
+}) => (
+  <>
+    <div
+      className="shrink-0 bg-muted/80 backdrop-blur-sm border-b border-border/60 px-4 py-2 flex items-center text-xs font-medium text-muted-foreground select-none"
+      style={{
+        display: "grid",
+        gridTemplateColumns: `${columnWidths.name}% ${columnWidths.size}% ${columnWidths.modified}% ${columnWidths.actions}%`,
+      }}
+    >
+      <div
+        className="flex items-center gap-1 cursor-pointer hover:text-foreground relative pr-2"
+        onClick={() => handleSort("name")}
+      >
+        <span>{t("sftp.columns.name")}</span>
+        {sortField === "name" && (
+          <span className="text-primary">{sortOrder === "asc" ? "^" : "v"}</span>
+        )}
+        <div
+          className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/50 transition-colors"
+          onMouseDown={(e) => handleResizeStart("name", e)}
+        />
+      </div>
+      <div
+        className="flex items-center gap-1 cursor-pointer hover:text-foreground relative pr-2"
+        onClick={() => handleSort("size")}
+      >
+        <span>{t("sftp.columns.size")}</span>
+        {sortField === "size" && (
+          <span className="text-primary">{sortOrder === "asc" ? "^" : "v"}</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 relative pr-2"
+        onClick={() => handleSort("modified")}
+      >
+        <span>{t("sftp.columns.modified")}</span>
+        {sortField === "modified" && (
+          <span className="text-primary">{sortOrder === "asc" ? "^" : "v"}</span>
+        )}
+        <div
+          className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/50 transition-colors"
+          onMouseDown={(e) => handleResizeStart("modified", e)}
+        />
+      </div>
+      <div className="text-right">{t("sftp.columns.actions")}</div>
+    </div>
+
+    <div
+      ref={fileListRef}
+      className={cn(
+        "flex-1 min-h-0 overflow-y-auto relative",
+        dragActive && "bg-primary/5 ring-2 ring-inset ring-primary",
+      )}
+      onScroll={handleFileListScroll}
+      onDragEnter={handleDrag}
+      onDragLeave={handleDrag}
+      onDragOver={handleDrag}
+      onDrop={handleDrop}
+    >
+      {dragActive && (
+        <div className="absolute inset-0 flex items-center justify-center pointer-events-none z-10">
+          <div className="bg-background/95 p-6 rounded-xl shadow-lg border-2 border-dashed border-primary text-primary font-medium flex flex-col items-center gap-2">
+            <Upload size={32} />
+            <span>{t("sftp.dropFilesHere")}</span>
+          </div>
+        </div>
+      )}
+
+      {loading && files.length === 0 && (
+        <div className="absolute inset-0 flex items-center justify-center bg-background/80">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      )}
+
+      {loadingTextContent && (
+        <div className="absolute inset-0 flex items-center justify-center bg-background/80 z-20">
+          <div className="flex flex-col items-center gap-2">
+            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+            <span className="text-sm text-muted-foreground">
+              {t("sftp.status.loading")}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {reconnecting && (
+        <div className="absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-20">
+          <div className="flex flex-col items-center gap-3 p-6 rounded-xl bg-secondary/90 border border-border/60 shadow-lg">
+            <Loader2 className="h-8 w-8 animate-spin text-primary" />
+            <div className="text-center">
+              <div className="text-sm font-medium">{t("sftp.reconnecting.title")}</div>
+              <div className="text-xs text-muted-foreground mt-1">
+                {t("sftp.reconnecting.desc")}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {files.length === 0 && !loading && (
+        <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
+          <Folder size={48} className="mb-3 opacity-50" />
+          <div className="text-sm font-medium">{t("sftp.emptyDirectory")}</div>
+          <div className="text-xs mt-1">{t("sftp.dragDropToUpload")}</div>
+        </div>
+      )}
+
+      <ContextMenu>
+        <ContextMenuTrigger asChild>
+          <div
+            className={shouldVirtualize ? "relative" : "divide-y divide-border/30"}
+            style={shouldVirtualize ? { height: totalHeight } : undefined}
+          >
+            {visibleRows.map(({ file, index: idx, top }) => {
+              const isNavigableDirectory =
+                file.type === "directory" ||
+                (file.type === "symlink" && file.linkTarget === "directory");
+              const isDownloadableFile =
+                file.type === "file" ||
+                (file.type === "symlink" && file.linkTarget === "file");
+              const isParentEntry = file.name === "..";
+
+              return (
+                <ContextMenu key={file.name}>
+                  <ContextMenuTrigger>
+                    <div
+                      data-sftp-modal-row="true"
+                      className={cn(
+                        "px-4 py-2.5 items-center hover:bg-muted/50 cursor-pointer transition-colors text-sm",
+                        selectedFiles.has(file.name) && !isParentEntry && "bg-primary/10",
+                        shouldVirtualize ? "absolute left-0 right-0 border-b border-border/30" : "",
+                      )}
+                      style={
+                        shouldVirtualize
+                          ? {
+                            top,
+                            display: "grid",
+                            gridTemplateColumns: `${columnWidths.name}% ${columnWidths.size}% ${columnWidths.modified}% ${columnWidths.actions}%`,
+                          }
+                          : {
+                            display: "grid",
+                            gridTemplateColumns: `${columnWidths.name}% ${columnWidths.size}% ${columnWidths.modified}% ${columnWidths.actions}%`,
+                          }
+                      }
+                      onClick={(e) => handleFileClick(file, idx, e)}
+                      onDoubleClick={() => handleFileDoubleClick(file)}
+                    >
+                      <div className="flex items-center gap-3 min-w-0">
+                        <div className="relative shrink-0 h-7 w-7 flex items-center justify-center">
+                          {getFileIcon(
+                            file.name,
+                            isNavigableDirectory,
+                            file.type === "symlink" && !isNavigableDirectory,
+                          )}
+                          {file.type === "symlink" && (
+                            <Link
+                              size={10}
+                              className="absolute -bottom-0.5 -right-0.5 text-muted-foreground"
+                              aria-hidden="true"
+                            />
+                          )}
+                        </div>
+                        <span
+                          className={cn(
+                            "truncate font-medium",
+                            file.type === "symlink" && "italic pr-1",
+                          )}
+                        >
+                          {file.name}
+                          {file.type === "symlink" && (
+                            <span className="sr-only"> (symbolic link)</span>
+                          )}
+                        </span>
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        {isNavigableDirectory ? "--" : formatBytes(file.size)}
+                      </div>
+                      <div className="text-xs text-muted-foreground truncate">
+                        {formatDate(file.lastModified, resolvedLocale)}
+                      </div>
+                      <div className="flex items-center justify-end gap-1">
+                        {isDownloadableFile && (
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-7 w-7"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleDownload(file);
+                            }}
+                            title={t("sftp.context.download")}
+                          >
+                            <Download size={14} />
+                          </Button>
+                        )}
+                        {!isParentEntry && (
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-7 w-7 hover:text-destructive"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleDelete(file);
+                            }}
+                            title={t("sftp.context.delete")}
+                          >
+                            <Trash2 size={14} />
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+                  </ContextMenuTrigger>
+                  <ContextMenuContent>
+                    {isParentEntry ? (
+                      <ContextMenuItem
+                        onClick={() => {
+                          const segments = currentPath.split("/").filter(Boolean);
+                          segments.pop();
+                          const parentPath =
+                            segments.length === 0 ? "/" : `/${segments.join("/")}`;
+                          handleNavigate(parentPath);
+                        }}
+                      >
+                        {t("sftp.context.open")}
+                      </ContextMenuItem>
+                    ) : (
+                      <>
+                        {isNavigableDirectory && (
+                          <ContextMenuItem
+                            onClick={() =>
+                              handleNavigate(
+                                currentPath === "/"
+                                  ? `/${file.name}`
+                                  : `${currentPath}/${file.name}`,
+                              )
+                            }
+                          >
+                            <FolderOpen size={14} className="mr-2" />
+                            {t("sftp.context.open")}
+                          </ContextMenuItem>
+                        )}
+                        {isDownloadableFile && (
+                          <>
+                            <ContextMenuItem onClick={() => handleOpenFile(file)}>
+                              <FolderOpen size={14} className="mr-2" />
+                              {t("sftp.context.open")}
+                            </ContextMenuItem>
+                            <ContextMenuItem onClick={() => openFileOpenerDialog(file)}>
+                              <MoreHorizontal size={14} className="mr-2" />
+                              {t("sftp.context.openWith")}
+                            </ContextMenuItem>
+                            {!isKnownBinaryFile(file.name) && (
+                              <ContextMenuItem onClick={() => handleEditFile(file)}>
+                                <Edit2 size={14} className="mr-2" />
+                                {t("sftp.context.edit")}
+                              </ContextMenuItem>
+                            )}
+                            <ContextMenuSeparator />
+                            <ContextMenuItem onClick={() => handleDownload(file)}>
+                              <Download size={14} className="mr-2" />
+                              {t("sftp.context.download")}
+                            </ContextMenuItem>
+                          </>
+                        )}
+                        <ContextMenuItem onClick={() => openRenameDialog(file)}>
+                          <Edit2 size={14} className="mr-2" />
+                          {t("sftp.context.rename")}
+                        </ContextMenuItem>
+                        {!isLocalSession && (
+                          <ContextMenuItem onClick={() => openPermissionsDialog(file)}>
+                            <Shield size={14} className="mr-2" />
+                            {t("sftp.context.permissions")}
+                          </ContextMenuItem>
+                        )}
+                        <ContextMenuItem
+                          className="text-destructive"
+                          onClick={() => handleDelete(file)}
+                        >
+                          <Trash2 size={14} className="mr-2" />
+                          {t("sftp.context.delete")}
+                        </ContextMenuItem>
+                      </>
+                    )}
+                  </ContextMenuContent>
+                </ContextMenu>
+              );
+            })}
+          </div>
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuItem onClick={handleCreateFolder}>
+            <Plus className="h-4 w-4 mr-2" /> {t("sftp.newFolder")}
+          </ContextMenuItem>
+          <ContextMenuItem onClick={handleCreateFile}>
+            <Plus className="h-4 w-4 mr-2" /> {t("sftp.newFile")}
+          </ContextMenuItem>
+          <ContextMenuItem onClick={() => inputRef.current?.click()}>
+            <Upload className="h-4 w-4 mr-2" /> {t("sftp.uploadFiles")}
+          </ContextMenuItem>
+          <ContextMenuItem onClick={() => loadFiles(currentPath, { force: true })}>
+            <RefreshCw className="h-4 w-4 mr-2" /> {t("sftp.context.refresh")}
+          </ContextMenuItem>
+          {selectedFiles.size > 0 && (
+            <>
+              <ContextMenuItem onClick={handleDownloadSelected}>
+                <Download className="h-4 w-4 mr-2" />
+                {t("sftp.context.downloadSelected", { count: selectedFiles.size })}
+              </ContextMenuItem>
+              <ContextMenuItem
+                className="text-destructive"
+                onClick={handleDeleteSelected}
+              >
+                <Trash2 className="h-4 w-4 mr-2" />
+                {t("sftp.context.deleteSelected", { count: selectedFiles.size })}
+              </ContextMenuItem>
+            </>
+          )}
+        </ContextMenuContent>
+      </ContextMenu>
+    </div>
+  </>
+);

components/sftp-modal/SftpModalFooter.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Download, Trash2 } from "lucide-react";
+import { Button } from "../ui/button";
+import type { RemoteFile } from "../../types";
+
+interface SftpModalFooterProps {
+  t: (key: string, params?: Record<string, unknown>) => string;
+  files: RemoteFile[];
+  selectedFiles: Set<string>;
+  loading: boolean;
+  uploading: boolean;
+  onDownloadSelected: () => void;
+  onDeleteSelected: () => void;
+}
+
+export const SftpModalFooter: React.FC<SftpModalFooterProps> = ({
+  t,
+  files,
+  selectedFiles,
+  loading,
+  uploading,
+  onDownloadSelected,
+  onDeleteSelected,
+}) => (
+  <div className="px-4 py-2 border-t border-border/60 flex items-center justify-between text-xs text-muted-foreground bg-muted/30 flex-shrink-0">
+    <span>
+      {t("sftp.itemsCount", { count: files.length })}
+      {selectedFiles.size > 0 && (
+        <>
+          <span className="mx-2">|</span>
+          <span className="text-primary">
+            {t("sftp.selectedCount", { count: selectedFiles.size })}
+          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-5 px-2 ml-2 text-xs text-primary hover:text-primary"
+            onClick={onDownloadSelected}
+          >
+            <Download size={10} className="mr-1" /> {t("sftp.context.download")}
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-5 px-2 text-xs text-destructive hover:text-destructive"
+            onClick={onDeleteSelected}
+          >
+            <Trash2 size={10} className="mr-1" /> {t("sftp.context.delete")}
+          </Button>
+        </>
+      )}
+    </span>
+    <span>
+      {loading
+        ? t("sftp.status.loading")
+        : uploading
+          ? t("sftp.status.uploading")
+          : t("sftp.status.ready")}
+    </span>
+  </div>
+);

components/sftp-modal/SftpModalHeader.tsx

@@ -0,0 +1,253 @@
+import React from "react";
+import { ArrowUp, ChevronRight, Home, MoreHorizontal, Plus, RefreshCw, Upload } from "lucide-react";
+import { cn } from "../../lib/utils";
+import type { Host, SftpFilenameEncoding } from "../../types";
+import { DistroAvatar } from "../DistroAvatar";
+import { Button } from "../ui/button";
+import { DialogHeader, DialogTitle } from "../ui/dialog";
+import { Input } from "../ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+
+interface BreadcrumbPart {
+  part: string;
+  originalIndex: number;
+}
+
+interface SftpModalHeaderProps {
+  t: (key: string, params?: Record<string, unknown>) => string;
+  host: Host;
+  credentials: { username?: string; hostname: string; port?: number };
+  showEncoding: boolean;
+  filenameEncoding: SftpFilenameEncoding;
+  onFilenameEncodingChange: (encoding: SftpFilenameEncoding) => void;
+  currentPath: string;
+  isEditingPath: boolean;
+  editingPathValue: string;
+  setEditingPathValue: (value: string) => void;
+  handlePathSubmit: () => void;
+  handlePathKeyDown: (e: React.KeyboardEvent) => void;
+  handlePathDoubleClick: () => void;
+  isAtRoot: boolean;
+  rootLabel: string;
+  isRefreshing: boolean;
+  onUp: () => void;
+  onHome: () => void;
+  onRefresh: () => void;
+  visibleBreadcrumbs: BreadcrumbPart[];
+  hiddenBreadcrumbs: BreadcrumbPart[];
+  needsBreadcrumbTruncation: boolean;
+  breadcrumbs: string[];
+  onBreadcrumbSelect: (index: number) => void;
+  onRootSelect: () => void;
+  inputRef: React.RefObject<HTMLInputElement>;
+  pathInputRef: React.RefObject<HTMLInputElement>;
+  uploading: boolean;
+  onTriggerUpload: () => void;
+  onCreateFolder: () => void;
+  onCreateFile: () => void;
+  onFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const SftpModalHeader: React.FC<SftpModalHeaderProps> = ({
+  t,
+  host,
+  credentials,
+  showEncoding,
+  filenameEncoding,
+  onFilenameEncodingChange,
+  currentPath,
+  isEditingPath,
+  editingPathValue,
+  setEditingPathValue,
+  handlePathSubmit,
+  handlePathKeyDown,
+  handlePathDoubleClick,
+  isAtRoot,
+  rootLabel,
+  isRefreshing,
+  onUp,
+  onHome,
+  onRefresh,
+  visibleBreadcrumbs,
+  hiddenBreadcrumbs,
+  needsBreadcrumbTruncation,
+  breadcrumbs,
+  onBreadcrumbSelect,
+  onRootSelect,
+  inputRef,
+  pathInputRef,
+  uploading,
+  onTriggerUpload,
+  onCreateFolder,
+  onCreateFile,
+  onFileSelect,
+}) => (
+  <>
+    <DialogHeader className="px-4 py-3 border-b border-border/60 flex-shrink-0">
+      <div className="flex items-center gap-3 pr-8">
+        <DistroAvatar
+          host={host}
+          fallback={host.label.slice(0, 2).toUpperCase()}
+          className="h-8 w-8"
+        />
+        <div className="flex-1 min-w-0">
+          <DialogTitle className="text-sm font-semibold">
+            {host.label}
+          </DialogTitle>
+          <div className="text-xs text-muted-foreground font-mono">
+            {credentials.username || "root"}@{credentials.hostname}:
+            {credentials.port || 22}
+          </div>
+        </div>
+      </div>
+    </DialogHeader>
+
+    <div className="px-4 py-2 border-b border-border/60 flex items-center gap-2 flex-shrink-0 bg-muted/30">
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-7 w-7"
+        onClick={onUp}
+        disabled={isAtRoot}
+      >
+        <ArrowUp size={14} />
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-7 w-7"
+        onClick={onHome}
+      >
+        <Home size={14} />
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-7 w-7"
+        onClick={onRefresh}
+      >
+        <RefreshCw
+          size={14}
+          className={cn(isRefreshing && "animate-spin")}
+        />
+      </Button>
+      {showEncoding && (
+        <Select
+          value={filenameEncoding}
+          onValueChange={(value) => onFilenameEncodingChange(value as SftpFilenameEncoding)}
+        >
+          <SelectTrigger className="h-7 w-[130px] text-xs" title={t("sftp.encoding.label")}>
+            <SelectValue placeholder={t("sftp.encoding.label")} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="auto">{t("sftp.encoding.auto")}</SelectItem>
+            <SelectItem value="utf-8">{t("sftp.encoding.utf8")}</SelectItem>
+            <SelectItem value="gb18030">{t("sftp.encoding.gb18030")}</SelectItem>
+          </SelectContent>
+        </Select>
+      )}
+
+      <div className="flex items-center gap-1 text-sm flex-1 min-w-0 overflow-hidden">
+        {isEditingPath ? (
+          <Input
+            ref={pathInputRef}
+            value={editingPathValue}
+            onChange={(e) => setEditingPathValue(e.target.value)}
+            onBlur={handlePathSubmit}
+            onKeyDown={handlePathKeyDown}
+            className="h-7 text-sm bg-background"
+            autoFocus
+          />
+        ) : (
+          <div
+            className="flex items-center gap-1 flex-1 min-w-0 cursor-text hover:bg-secondary/50 rounded px-1 py-0.5 transition-colors"
+            onDoubleClick={handlePathDoubleClick}
+            title={currentPath}
+          >
+            <button
+              className="text-muted-foreground hover:text-foreground px-1 shrink-0"
+              onClick={onRootSelect}
+            >
+              {rootLabel}
+            </button>
+            {visibleBreadcrumbs.map(({ part, originalIndex }, displayIdx) => {
+              const isLast = originalIndex === breadcrumbs.length - 1;
+              const showEllipsisBefore =
+                needsBreadcrumbTruncation && displayIdx === 1;
+
+              return (
+                <React.Fragment key={originalIndex}>
+                  {showEllipsisBefore && (
+                    <>
+                      <ChevronRight
+                        size={12}
+                        className="text-muted-foreground flex-shrink-0"
+                      />
+                      <span
+                        className="text-muted-foreground px-1 shrink-0 flex items-center cursor-default"
+                        title={`${t("sftp.showHiddenPaths")}: ${hiddenBreadcrumbs
+                          .map((h) => h.part)
+                          .join(" > ")}`}
+                      >
+                        <MoreHorizontal size={14} />
+                      </span>
+                    </>
+                  )}
+                  <ChevronRight
+                    size={12}
+                    className="text-muted-foreground flex-shrink-0"
+                  />
+                  <button
+                    className={cn(
+                      "text-muted-foreground hover:text-foreground truncate px-1 max-w-[100px]",
+                      isLast && "text-foreground font-medium",
+                    )}
+                    onClick={() => onBreadcrumbSelect(originalIndex)}
+                    title={part}
+                  >
+                    {part}
+                  </button>
+                </React.Fragment>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2 ml-auto">
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-7"
+          onClick={onTriggerUpload}
+          disabled={uploading}
+        >
+          <Upload size={14} className="mr-1.5" /> {t("sftp.upload")}
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-7"
+          onClick={onCreateFolder}
+        >
+          <Plus size={14} className="mr-1.5" /> {t("sftp.newFolder")}
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-7"
+          onClick={onCreateFile}
+        >
+          <Plus size={14} className="mr-1.5" /> {t("sftp.newFile")}
+        </Button>
+        <input
+          type="file"
+          className="hidden"
+          ref={inputRef}
+          onChange={onFileSelect}
+          multiple
+        />
+      </div>
+    </div>
+  </>
+);

components/sftp-modal/SftpModalUploadTasks.tsx

@@ -0,0 +1,175 @@
+import React from "react";
+import { Loader2, Upload, X, XCircle } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../ui/button";
+
+interface UploadTask {
+  id: string;
+  fileName: string;
+  totalBytes: number;
+  transferredBytes: number;
+  progress: number;
+  speed: number;
+  status: "pending" | "uploading" | "completed" | "failed" | "cancelled";
+  error?: string;
+}
+
+interface SftpModalUploadTasksProps {
+  tasks: UploadTask[];
+  t: (key: string, params?: Record<string, unknown>) => string;
+  onCancel?: () => void;
+  onDismiss?: (taskId: string) => void;
+}
+
+export const SftpModalUploadTasks: React.FC<SftpModalUploadTasksProps> = ({ tasks, t, onCancel, onDismiss }) => {
+  if (tasks.length === 0) return null;
+
+  return (
+    <div className="border-t border-border/60 bg-secondary/50 flex-shrink-0">
+      <div className="max-h-40 overflow-y-auto overflow-x-hidden">
+        {tasks.map((task) => {
+          const formatSpeed = (bytesPerSec: number) => {
+            if (bytesPerSec <= 0) return "";
+            if (bytesPerSec >= 1024 * 1024)
+              return `${(bytesPerSec / (1024 * 1024)).toFixed(1)} MB/s`;
+            if (bytesPerSec >= 1024)
+              return `${(bytesPerSec / 1024).toFixed(1)} KB/s`;
+            return `${Math.round(bytesPerSec)} B/s`;
+          };
+
+          const formatBytes = (bytes: number) => {
+            if (bytes === 0) return "0 B";
+            if (bytes >= 1024 * 1024)
+              return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+            if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+            return `${bytes} B`;
+          };
+
+          const remainingBytes = task.totalBytes - task.transferredBytes;
+          const remainingTime =
+            task.speed > 0 ? Math.ceil(remainingBytes / task.speed) : 0;
+          const remainingStr =
+            remainingTime > 60
+              ? `~${Math.ceil(remainingTime / 60)}m left`
+              : remainingTime > 0
+                ? `~${remainingTime}s left`
+                : "";
+
+          return (
+            <div
+              key={task.id}
+              className="px-4 py-2.5 flex items-center gap-3 border-b border-border/30 last:border-b-0"
+            >
+              <div className="shrink-0">
+                {task.status === "uploading" && (
+                  <Loader2 size={14} className="animate-spin text-primary" />
+                )}
+                {task.status === "pending" && (
+                  <Upload size={14} className="text-muted-foreground animate-pulse" />
+                )}
+                {task.status === "completed" && (
+                  <Upload size={14} className="text-green-500" />
+                )}
+                {task.status === "failed" && (
+                  <XCircle size={14} className="text-destructive" />
+                )}
+                {task.status === "cancelled" && (
+                  <XCircle size={14} className="text-muted-foreground" />
+                )}
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-xs font-medium truncate">
+                    {task.fileName}
+                  </span>
+                  {task.status === "uploading" && task.speed > 0 && (
+                    <span className="text-[10px] text-primary font-mono shrink-0">
+                      {formatSpeed(task.speed)}
+                    </span>
+                  )}
+                  {task.status === "uploading" && remainingStr && (
+                    <span className="text-[10px] text-muted-foreground shrink-0">
+                      {remainingStr}
+                    </span>
+                  )}
+                </div>
+                {(task.status === "uploading" || task.status === "pending") && (
+                  <div className="mt-1.5 flex items-center gap-2">
+                    <div className="flex-1 h-1.5 bg-secondary rounded-full overflow-hidden">
+                      <div
+                        className={cn(
+                          "h-full rounded-full transition-all duration-150",
+                          task.status === "pending"
+                            ? "bg-muted-foreground/50 animate-pulse w-full"
+                            : "bg-primary",
+                        )}
+                        style={{
+                          width:
+                            task.status === "uploading"
+                              ? `${task.progress}%`
+                              : undefined,
+                        }}
+                      />
+                    </div>
+                    <span className="text-[10px] text-muted-foreground font-mono shrink-0 w-8 text-right">
+                      {task.status === "uploading" ? `${Math.round(task.progress)}%` : "..."}
+                    </span>
+                  </div>
+                )}
+                {task.status === "uploading" && task.totalBytes > 0 && (
+                  <div className="text-[10px] text-muted-foreground mt-0.5 font-mono">
+                    {formatBytes(task.transferredBytes)} / {formatBytes(task.totalBytes)}
+                  </div>
+                )}
+                {task.status === "completed" && (
+                  <div className="text-[10px] text-green-600 mt-0.5">
+                    Completed - {formatBytes(task.totalBytes)}
+                  </div>
+                )}
+                {task.status === "cancelled" && (
+                  <div className="text-[10px] text-muted-foreground mt-0.5">
+                    Cancelled
+                  </div>
+                )}
+                {task.status === "failed" && task.error && (
+                  <div className="text-[10px] text-destructive truncate mt-0.5">
+                    {task.error}
+                  </div>
+                )}
+              </div>
+              <div className="shrink-0 flex items-center gap-1">
+                {task.status === "pending" && (
+                  <span className="text-[10px] text-muted-foreground">
+                    {t("sftp.task.waiting")}
+                  </span>
+                )}
+                {(task.status === "uploading" || task.status === "pending") && onCancel && (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-6 w-6 text-destructive hover:text-destructive"
+                    onClick={onCancel}
+                    title={t("sftp.action.cancel")}
+                  >
+                    <X size={12} />
+                  </Button>
+                )}
+                {(task.status === "completed" || task.status === "failed" || task.status === "cancelled") && onDismiss && (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-6 w-6 text-muted-foreground hover:text-foreground"
+                    onClick={() => onDismiss(task.id)}
+                    title={t("sftp.action.dismiss")}
+                  >
+                    <X size={12} />
+                  </Button>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

components/sftp-modal/fileIcons.tsx

@@ -0,0 +1,149 @@
+import {
+  Database,
+  ExternalLink,
+  File,
+  FileArchive,
+  FileAudio,
+  FileCode,
+  FileImage,
+  FileSpreadsheet,
+  FileText,
+  FileType,
+  FileVideo,
+  Folder,
+  Globe,
+  Lock,
+  Settings,
+  Terminal,
+} from "lucide-react";
+import React from "react";
+
+export const getFileIcon = (fileName: string, isDirectory: boolean, isSymlink?: boolean) => {
+  if (isDirectory)
+    return (
+      <Folder
+        size={18}
+        fill="currentColor"
+        fillOpacity={0.2}
+        className="text-blue-400"
+      />
+    );
+
+  if (isSymlink) {
+    return <ExternalLink size={18} className="text-cyan-500" />;
+  }
+
+  const ext = fileName.split(".").pop()?.toLowerCase() || "";
+
+  if (["doc", "docx", "rtf", "odt"].includes(ext))
+    return <FileText size={18} className="text-blue-500" />;
+  if (["xls", "xlsx", "csv", "ods"].includes(ext))
+    return <FileSpreadsheet size={18} className="text-green-500" />;
+  if (["ppt", "pptx", "odp"].includes(ext))
+    return <FileType size={18} className="text-orange-500" />;
+  if (["pdf"].includes(ext))
+    return <FileText size={18} className="text-red-500" />;
+
+  if (["js", "jsx", "ts", "tsx", "mjs", "cjs"].includes(ext))
+    return <FileCode size={18} className="text-yellow-500" />;
+  if (["py", "pyc", "pyw"].includes(ext))
+    return <FileCode size={18} className="text-blue-400" />;
+  if (["sh", "bash", "zsh", "fish", "bat", "cmd", "ps1"].includes(ext))
+    return <Terminal size={18} className="text-green-400" />;
+  if (["c", "cpp", "h", "hpp", "cc", "cxx"].includes(ext))
+    return <FileCode size={18} className="text-blue-600" />;
+  if (["java", "class", "jar"].includes(ext))
+    return <FileCode size={18} className="text-orange-600" />;
+  if (["go"].includes(ext))
+    return <FileCode size={18} className="text-cyan-500" />;
+  if (["rs"].includes(ext))
+    return <FileCode size={18} className="text-orange-400" />;
+  if (["rb"].includes(ext))
+    return <FileCode size={18} className="text-red-400" />;
+  if (["php"].includes(ext))
+    return <FileCode size={18} className="text-purple-500" />;
+  if (["html", "htm", "xhtml"].includes(ext))
+    return <Globe size={18} className="text-orange-500" />;
+  if (["css", "scss", "sass", "less"].includes(ext))
+    return <FileCode size={18} className="text-blue-500" />;
+  if (["vue", "svelte"].includes(ext))
+    return <FileCode size={18} className="text-green-500" />;
+
+  if (["json", "json5"].includes(ext))
+    return <FileCode size={18} className="text-yellow-600" />;
+  if (["xml", "xsl", "xslt"].includes(ext))
+    return <FileCode size={18} className="text-orange-400" />;
+  if (["yml", "yaml"].includes(ext))
+    return <Settings size={18} className="text-pink-400" />;
+  if (["toml", "ini", "conf", "cfg", "config"].includes(ext))
+    return <Settings size={18} className="text-gray-400" />;
+  if (["env"].includes(ext))
+    return <Lock size={18} className="text-yellow-500" />;
+  if (["sql", "sqlite", "db"].includes(ext))
+    return <Database size={18} className="text-blue-400" />;
+
+  if (
+    [
+      "jpg",
+      "jpeg",
+      "png",
+      "gif",
+      "bmp",
+      "webp",
+      "svg",
+      "ico",
+      "tiff",
+      "tif",
+      "heic",
+      "heif",
+      "avif",
+    ].includes(ext)
+  )
+    return <FileImage size={18} className="text-purple-400" />;
+
+  if (
+    [
+      "mp4",
+      "mkv",
+      "avi",
+      "mov",
+      "wmv",
+      "flv",
+      "webm",
+      "m4v",
+      "3gp",
+      "mpeg",
+      "mpg",
+    ].includes(ext)
+  )
+    return <FileVideo size={18} className="text-pink-500" />;
+
+  if (
+    ["mp3", "wav", "flac", "aac", "ogg", "m4a", "wma", "opus", "aiff"].includes(
+      ext,
+    )
+  )
+    return <FileAudio size={18} className="text-green-400" />;
+
+  if (
+    [
+      "zip",
+      "rar",
+      "7z",
+      "tar",
+      "gz",
+      "bz2",
+      "xz",
+      "tgz",
+      "tbz2",
+      "lz",
+      "lzma",
+      "cab",
+      "iso",
+      "dmg",
+    ].includes(ext)
+  )
+    return <FileArchive size={18} className="text-yellow-600" />;
+
+  return <File size={18} className="text-muted-foreground" />;
+};

components/sftp-modal/hooks/useSftpModalCreateDelete.ts

@@ -0,0 +1,108 @@
+import { useCallback } from "react";
+import type { RemoteFile } from "../../../types";
+import { toast } from "../../ui/toast";
+
+interface UseSftpModalCreateDeleteParams {
+  currentPath: string;
+  isLocalSession: boolean;
+  joinPath: (base: string, name: string) => string;
+  ensureSftp: () => Promise<string>;
+  loadFiles: (path: string, options?: { force?: boolean }) => Promise<void>;
+  deleteLocalFile: (path: string) => Promise<void>;
+  deleteSftp: (sftpId: string, path: string) => Promise<void>;
+  mkdirLocal: (path: string) => Promise<void>;
+  mkdirSftp: (sftpId: string, path: string) => Promise<void>;
+  writeLocalFile: (path: string, data: ArrayBuffer) => Promise<void>;
+  writeSftpBinary: (sftpId: string, path: string, data: ArrayBuffer) => Promise<void>;
+  writeSftp: (sftpId: string, path: string, data: string) => Promise<void>;
+  t: (key: string, params?: Record<string, unknown>) => string;
+}
+
+interface UseSftpModalCreateDeleteResult {
+  handleDelete: (file: RemoteFile) => Promise<void>;
+  handleCreateFolder: () => Promise<void>;
+  handleCreateFile: () => Promise<void>;
+}
+
+export const useSftpModalCreateDelete = ({
+  currentPath,
+  isLocalSession,
+  joinPath,
+  ensureSftp,
+  loadFiles,
+  deleteLocalFile,
+  deleteSftp,
+  mkdirLocal,
+  mkdirSftp,
+  writeLocalFile,
+  writeSftpBinary,
+  writeSftp,
+  t,
+}: UseSftpModalCreateDeleteParams): UseSftpModalCreateDeleteResult => {
+  const handleDelete = useCallback(
+    async (file: RemoteFile) => {
+      if (file.name === "..") return;
+      if (!confirm(t("sftp.deleteConfirm.single", { name: file.name }))) return;
+
+      try {
+        const fullPath = joinPath(currentPath, file.name);
+        if (isLocalSession) {
+          await deleteLocalFile(fullPath);
+        } else {
+          await deleteSftp(await ensureSftp(), fullPath);
+        }
+        await loadFiles(currentPath, { force: true });
+      } catch (e) {
+        toast.error(
+          e instanceof Error ? e.message : t("sftp.error.deleteFailed"),
+          "SFTP",
+        );
+      }
+    },
+    [currentPath, deleteLocalFile, deleteSftp, ensureSftp, isLocalSession, joinPath, loadFiles, t],
+  );
+
+  const handleCreateFolder = useCallback(async () => {
+    const folderName = prompt(t("sftp.prompt.newFolderName"));
+    if (!folderName) return;
+    try {
+      const fullPath = joinPath(currentPath, folderName);
+      if (isLocalSession) {
+        await mkdirLocal(fullPath);
+      } else {
+        await mkdirSftp(await ensureSftp(), fullPath);
+      }
+      await loadFiles(currentPath, { force: true });
+    } catch (e) {
+      toast.error(
+        e instanceof Error ? e.message : t("sftp.error.createFolderFailed"),
+        "SFTP",
+      );
+    }
+  }, [currentPath, ensureSftp, isLocalSession, joinPath, loadFiles, mkdirLocal, mkdirSftp, t]);
+
+  const handleCreateFile = useCallback(async () => {
+    const fileName = prompt(t("sftp.fileName.placeholder"));
+    if (!fileName) return;
+    try {
+      const fullPath = joinPath(currentPath, fileName);
+      if (isLocalSession) {
+        await writeLocalFile(fullPath, new ArrayBuffer(0));
+      } else {
+        try {
+          await writeSftpBinary(await ensureSftp(), fullPath, new ArrayBuffer(0));
+        } catch {
+          await writeSftp(await ensureSftp(), fullPath, "");
+        }
+      }
+      await loadFiles(currentPath, { force: true });
+    } catch (e) {
+      toast.error(
+        e instanceof Error ? e.message : t("sftp.error.createFileFailed"),
+        "SFTP",
+      );
+    }
+  }, [currentPath, ensureSftp, isLocalSession, joinPath, loadFiles, t, writeLocalFile, writeSftp, writeSftpBinary]);
+
+  return { handleDelete, handleCreateFolder, handleCreateFile };
+};

components/sftp-modal/hooks/useSftpModalFileActions.ts

@@ -0,0 +1,252 @@
+import type { RemoteFile } from "../../../types";
+import { useSftpModalCreateDelete } from "./useSftpModalCreateDelete";
+import { useSftpModalRename } from "./useSftpModalRename";
+import { useSftpModalPermissions } from "./useSftpModalPermissions";
+import { useSftpModalTextEditor } from "./useSftpModalTextEditor";
+import { useSftpModalFileOpener } from "./useSftpModalFileOpener";
+import type { FileOpenerType, SystemAppInfo } from "../../../lib/sftpFileUtils";
+
+interface UseSftpModalFileActionsParams {
+  currentPath: string;
+  isLocalSession: boolean;
+  joinPath: (base: string, name: string) => string;
+  ensureSftp: () => Promise<string>;
+  loadFiles: (path: string, options?: { force?: boolean }) => Promise<void>;
+  readLocalFile: (path: string) => Promise<ArrayBuffer>;
+  readSftp: (sftpId: string, path: string) => Promise<string>;
+  writeLocalFile: (path: string, data: ArrayBuffer) => Promise<void>;
+  writeSftp: (sftpId: string, path: string, data: string) => Promise<void>;
+  writeSftpBinary: (sftpId: string, path: string, data: ArrayBuffer) => Promise<void>;
+  deleteLocalFile: (path: string) => Promise<void>;
+  deleteSftp: (sftpId: string, path: string) => Promise<void>;
+  mkdirLocal: (path: string) => Promise<void>;
+  mkdirSftp: (sftpId: string, path: string) => Promise<void>;
+  renameSftp: (sftpId: string, oldPath: string, newPath: string) => Promise<void>;
+  chmodSftp: (sftpId: string, path: string, permissions: string) => Promise<void>;
+  statSftp: (sftpId: string, path: string) => Promise<{ permissions?: string }>;
+  t: (key: string, params?: Record<string, unknown>) => string;
+  sftpAutoSync: boolean;
+  getOpenerForFile: (name: string) => { openerType: FileOpenerType; systemApp?: SystemAppInfo } | null;
+  setOpenerForExtension: (ext: string, openerType: FileOpenerType, systemApp?: SystemAppInfo) => void;
+  downloadSftpToTempAndOpen: (sftpId: string, path: string, fileName: string, appPath: string, opts: { enableWatch: boolean }) => Promise<void>;
+  selectApplication: () => Promise<{ path: string; name: string } | null>;
+}
+
+interface UseSftpModalFileActionsResult {
+  handleDelete: (file: RemoteFile) => Promise<void>;
+  handleCreateFolder: () => Promise<void>;
+  handleCreateFile: () => Promise<void>;
+  showRenameDialog: boolean;
+  setShowRenameDialog: (open: boolean) => void;
+  renameTarget: RemoteFile | null;
+  renameName: string;
+  setRenameName: (value: string) => void;
+  isRenaming: boolean;
+  openRenameDialog: (file: RemoteFile) => void;
+  handleRename: () => Promise<void>;
+  showPermissionsDialog: boolean;
+  setShowPermissionsDialog: (open: boolean) => void;
+  permissionsTarget: RemoteFile | null;
+  permissions: {
+    owner: { read: boolean; write: boolean; execute: boolean };
+    group: { read: boolean; write: boolean; execute: boolean };
+    others: { read: boolean; write: boolean; execute: boolean };
+  };
+  isChangingPermissions: boolean;
+  openPermissionsDialog: (file: RemoteFile) => Promise<void>;
+  togglePermission: (role: "owner" | "group" | "others", perm: "read" | "write" | "execute") => void;
+  getOctalPermissions: () => string;
+  getSymbolicPermissions: () => string;
+  handleSavePermissions: () => Promise<void>;
+  showFileOpenerDialog: boolean;
+  setShowFileOpenerDialog: (open: boolean) => void;
+  fileOpenerTarget: RemoteFile | null;
+  setFileOpenerTarget: (target: RemoteFile | null) => void;
+  openFileOpenerDialog: (file: RemoteFile) => void;
+  handleFileOpenerSelect: (
+    openerType: FileOpenerType,
+    setAsDefault: boolean,
+    systemApp?: SystemAppInfo,
+  ) => Promise<void>;
+  handleSelectSystemApp: () => Promise<SystemAppInfo | null>;
+  showTextEditor: boolean;
+  setShowTextEditor: (open: boolean) => void;
+  textEditorTarget: RemoteFile | null;
+  setTextEditorTarget: (target: RemoteFile | null) => void;
+  textEditorContent: string;
+  setTextEditorContent: (value: string) => void;
+  loadingTextContent: boolean;
+  handleEditFile: (file: RemoteFile) => Promise<void>;
+  handleSaveTextFile: (content: string) => Promise<void>;
+  handleOpenFile: (file: RemoteFile) => Promise<void>;
+}
+
+export const useSftpModalFileActions = ({
+  currentPath,
+  isLocalSession,
+  joinPath,
+  ensureSftp,
+  loadFiles,
+  readLocalFile,
+  readSftp,
+  writeLocalFile,
+  writeSftp,
+  writeSftpBinary,
+  deleteLocalFile,
+  deleteSftp,
+  mkdirLocal,
+  mkdirSftp,
+  renameSftp,
+  chmodSftp,
+  statSftp,
+  t,
+  sftpAutoSync,
+  getOpenerForFile,
+  setOpenerForExtension,
+  downloadSftpToTempAndOpen,
+  selectApplication,
+}: UseSftpModalFileActionsParams): UseSftpModalFileActionsResult => {
+  const { handleDelete, handleCreateFolder, handleCreateFile } =
+    useSftpModalCreateDelete({
+      currentPath,
+      isLocalSession,
+      joinPath,
+      ensureSftp,
+      loadFiles,
+      deleteLocalFile,
+      deleteSftp,
+      mkdirLocal,
+      mkdirSftp,
+      writeLocalFile,
+      writeSftpBinary,
+      writeSftp,
+      t,
+    });
+
+  const {
+    showRenameDialog,
+    setShowRenameDialog,
+    renameTarget,
+    renameName,
+    setRenameName,
+    isRenaming,
+    openRenameDialog,
+    handleRename,
+  } = useSftpModalRename({
+    currentPath,
+    isLocalSession,
+    joinPath,
+    ensureSftp,
+    loadFiles,
+    renameSftp,
+    t,
+  });
+
+  const {
+    showPermissionsDialog,
+    setShowPermissionsDialog,
+    permissionsTarget,
+    permissions,
+    isChangingPermissions,
+    openPermissionsDialog,
+    togglePermission,
+    getOctalPermissions,
+    getSymbolicPermissions,
+    handleSavePermissions,
+  } = useSftpModalPermissions({
+    currentPath,
+    isLocalSession,
+    joinPath,
+    ensureSftp,
+    loadFiles,
+    chmodSftp,
+    statSftp,
+    t,
+  });
+
+  const {
+    showTextEditor,
+    setShowTextEditor,
+    textEditorTarget,
+    setTextEditorTarget,
+    textEditorContent,
+    setTextEditorContent,
+    loadingTextContent,
+    handleEditFile,
+    handleSaveTextFile,
+  } = useSftpModalTextEditor({
+    currentPath,
+    isLocalSession,
+    joinPath,
+    ensureSftp,
+    readLocalFile,
+    readSftp,
+    writeLocalFile,
+    writeSftp,
+    t,
+  });
+
+  const {
+    showFileOpenerDialog,
+    setShowFileOpenerDialog,
+    fileOpenerTarget,
+    setFileOpenerTarget,
+    openFileOpenerDialog,
+    handleOpenFile,
+    handleFileOpenerSelect,
+    handleSelectSystemApp,
+  } = useSftpModalFileOpener({
+    currentPath,
+    isLocalSession,
+    joinPath,
+    ensureSftp,
+    sftpAutoSync,
+    getOpenerForFile,
+    setOpenerForExtension,
+    downloadSftpToTempAndOpen,
+    selectApplication,
+    t,
+    handleEditFile,
+  });
+
+  return {
+    handleDelete,
+    handleCreateFolder,
+    handleCreateFile,
+    showRenameDialog,
+    setShowRenameDialog,
+    renameTarget,
+    renameName,
+    setRenameName,
+    isRenaming,
+    openRenameDialog,
+    handleRename,
+    showPermissionsDialog,
+    setShowPermissionsDialog,
+    permissionsTarget,
+    permissions,
+    isChangingPermissions,
+    openPermissionsDialog,
+    togglePermission,
+    getOctalPermissions,
+    getSymbolicPermissions,
+    handleSavePermissions,
+    showFileOpenerDialog,
+    setShowFileOpenerDialog,
+    fileOpenerTarget,
+    setFileOpenerTarget,
+    openFileOpenerDialog,
+    handleFileOpenerSelect,
+    handleSelectSystemApp,
+    showTextEditor,
+    setShowTextEditor,
+    textEditorTarget,
+    setTextEditorTarget,
+    textEditorContent,
+    setTextEditorContent,
+    loadingTextContent,
+    handleEditFile,
+    handleSaveTextFile,
+    handleOpenFile,
+  };
+};

components/sftp-modal/hooks/useSftpModalFileOpener.ts

@@ -0,0 +1,154 @@
+import { useCallback, useState } from "react";
+import type { RemoteFile } from "../../../types";
+import { toast } from "../../ui/toast";
+import { getFileExtension, FileOpenerType, SystemAppInfo } from "../../../lib/sftpFileUtils";
+
+interface UseSftpModalFileOpenerParams {
+  currentPath: string;
+  isLocalSession: boolean;
+  joinPath: (base: string, name: string) => string;
+  ensureSftp: () => Promise<string>;
+  sftpAutoSync: boolean;
+  getOpenerForFile: (name: string) => { openerType: FileOpenerType; systemApp?: SystemAppInfo } | null;
+  setOpenerForExtension: (ext: string, openerType: FileOpenerType, systemApp?: SystemAppInfo) => void;
+  downloadSftpToTempAndOpen: (sftpId: string, path: string, fileName: string, appPath: string, opts: { enableWatch: boolean }) => Promise<void>;
+  selectApplication: () => Promise<{ path: string; name: string } | null>;
+  t: (key: string, params?: Record<string, unknown>) => string;
+  handleEditFile: (file: RemoteFile) => Promise<void>;
+}
+
+interface UseSftpModalFileOpenerResult {
+  showFileOpenerDialog: boolean;
+  setShowFileOpenerDialog: (open: boolean) => void;
+  fileOpenerTarget: RemoteFile | null;
+  setFileOpenerTarget: (target: RemoteFile | null) => void;
+  openFileOpenerDialog: (file: RemoteFile) => void;
+  handleOpenFile: (file: RemoteFile) => Promise<void>;
+  handleFileOpenerSelect: (
+    openerType: FileOpenerType,
+    setAsDefault: boolean,
+    systemApp?: SystemAppInfo,
+  ) => Promise<void>;
+  handleSelectSystemApp: () => Promise<SystemAppInfo | null>;
+}
+
+export const useSftpModalFileOpener = ({
+  currentPath,
+  isLocalSession,
+  joinPath,
+  ensureSftp,
+  sftpAutoSync,
+  getOpenerForFile,
+  setOpenerForExtension,
+  downloadSftpToTempAndOpen,
+  selectApplication,
+  t,
+  handleEditFile,
+}: UseSftpModalFileOpenerParams): UseSftpModalFileOpenerResult => {
+  const [showFileOpenerDialog, setShowFileOpenerDialog] = useState(false);
+  const [fileOpenerTarget, setFileOpenerTarget] = useState<RemoteFile | null>(null);
+
+  const openFileOpenerDialog = useCallback((file: RemoteFile) => {
+    setFileOpenerTarget(file);
+    setShowFileOpenerDialog(true);
+  }, []);
+
+  const handleOpenFile = useCallback(async (file: RemoteFile) => {
+    const savedOpener = getOpenerForFile(file.name);
+
+    if (savedOpener) {
+      if (savedOpener.openerType === "builtin-editor") {
+        await handleEditFile(file);
+      } else if (savedOpener.openerType === "system-app" && savedOpener.systemApp) {
+        try {
+          const fullPath = joinPath(currentPath, file.name);
+          if (isLocalSession) {
+            const bridge = (window as unknown as { netcatty?: NetcattyBridge }).netcatty;
+            if (bridge?.openWithApplication) {
+              await bridge.openWithApplication(fullPath, savedOpener.systemApp.path);
+            }
+          } else {
+            const sftpId = await ensureSftp();
+            await downloadSftpToTempAndOpen(
+              sftpId,
+              fullPath,
+              file.name,
+              savedOpener.systemApp.path,
+              { enableWatch: sftpAutoSync },
+            );
+          }
+        } catch (e) {
+          toast.error(
+            e instanceof Error ? e.message : t("sftp.error.openFailed"),
+            "SFTP",
+          );
+        }
+      }
+    } else {
+      openFileOpenerDialog(file);
+    }
+  }, [currentPath, downloadSftpToTempAndOpen, ensureSftp, getOpenerForFile, handleEditFile, isLocalSession, joinPath, openFileOpenerDialog, sftpAutoSync, t]);
+
+  const handleFileOpenerSelect = useCallback(
+    async (openerType: FileOpenerType, setAsDefault: boolean, systemApp?: SystemAppInfo) => {
+      if (!fileOpenerTarget) return;
+
+      if (setAsDefault) {
+        const ext = getFileExtension(fileOpenerTarget.name);
+        setOpenerForExtension(ext, openerType, systemApp);
+      }
+
+      setShowFileOpenerDialog(false);
+
+      if (openerType === "builtin-editor") {
+        await handleEditFile(fileOpenerTarget);
+      } else if (openerType === "system-app" && systemApp) {
+        try {
+          const fullPath = joinPath(currentPath, fileOpenerTarget.name);
+          if (isLocalSession) {
+            const bridge = (window as unknown as { netcatty?: NetcattyBridge }).netcatty;
+            if (bridge?.openWithApplication) {
+              await bridge.openWithApplication(fullPath, systemApp.path);
+            }
+          } else {
+            const sftpId = await ensureSftp();
+            await downloadSftpToTempAndOpen(
+              sftpId,
+              fullPath,
+              fileOpenerTarget.name,
+              systemApp.path,
+              { enableWatch: sftpAutoSync },
+            );
+          }
+        } catch (e) {
+          toast.error(
+            e instanceof Error ? e.message : t("sftp.error.openFailed"),
+            "SFTP",
+          );
+        }
+      }
+
+      setFileOpenerTarget(null);
+    },
+    [currentPath, downloadSftpToTempAndOpen, ensureSftp, fileOpenerTarget, handleEditFile, isLocalSession, joinPath, sftpAutoSync, setOpenerForExtension, t],
+  );
+
+  const handleSelectSystemApp = useCallback(async (): Promise<SystemAppInfo | null> => {
+    const result = await selectApplication();
+    if (result) {
+      return { path: result.path, name: result.name };
+    }
+    return null;
+  }, [selectApplication]);
+
+  return {
+    showFileOpenerDialog,
+    setShowFileOpenerDialog,
+    fileOpenerTarget,
+    setFileOpenerTarget,
+    openFileOpenerDialog,
+    handleOpenFile,
+    handleFileOpenerSelect,
+    handleSelectSystemApp,
+  };
+};

components/sftp-modal/hooks/useSftpModalPath.ts

@@ -0,0 +1,135 @@
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { breadcrumbPathAt, getBreadcrumbs, getRootPath, getWindowsDrive, isWindowsPath } from "../pathUtils";
+
+interface UseSftpModalPathParams {
+  currentPath: string;
+  isLocalSession: boolean;
+  localHomePath: string | null;
+  onNavigate: (path: string) => void;
+  maxVisibleBreadcrumbParts?: number;
+}
+
+interface UseSftpModalPathResult {
+  isEditingPath: boolean;
+  editingPathValue: string;
+  setEditingPathValue: (value: string) => void;
+  pathInputRef: React.RefObject<HTMLInputElement>;
+  handlePathDoubleClick: () => void;
+  handlePathSubmit: () => void;
+  handlePathKeyDown: (e: React.KeyboardEvent) => void;
+  breadcrumbs: string[];
+  visibleBreadcrumbs: { part: string; originalIndex: number }[];
+  hiddenBreadcrumbs: { part: string; originalIndex: number }[];
+  needsBreadcrumbTruncation: boolean;
+  breadcrumbPathAtForIndex: (index: number) => string;
+  rootLabel: string;
+  rootPath: string;
+}
+
+export const useSftpModalPath = ({
+  currentPath,
+  isLocalSession,
+  localHomePath,
+  onNavigate,
+  maxVisibleBreadcrumbParts = 4,
+}: UseSftpModalPathParams): UseSftpModalPathResult => {
+  const [isEditingPath, setIsEditingPath] = useState(false);
+  const [editingPathValue, setEditingPathValue] = useState("");
+  const pathInputRef = useRef<HTMLInputElement>(null);
+
+  const handlePathDoubleClick = () => {
+    setEditingPathValue(currentPath);
+    setIsEditingPath(true);
+    setTimeout(() => pathInputRef.current?.select(), 0);
+  };
+
+  const handlePathSubmit = () => {
+    const fallbackPath = localHomePath || getRootPath(currentPath, isLocalSession);
+    const newPath = editingPathValue.trim() || fallbackPath;
+    setIsEditingPath(false);
+    if (newPath !== currentPath) {
+      if (isLocalSession) {
+        onNavigate(newPath);
+      } else {
+        onNavigate(newPath.startsWith("/") ? newPath : `/${newPath}`);
+      }
+    }
+  };
+
+  const handlePathKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handlePathSubmit();
+    } else if (e.key === "Escape") {
+      setIsEditingPath(false);
+    }
+  };
+
+  const breadcrumbs = useMemo(
+    () => getBreadcrumbs(currentPath, isLocalSession),
+    [currentPath, isLocalSession],
+  );
+
+  const { visibleBreadcrumbs, hiddenBreadcrumbs, needsBreadcrumbTruncation } =
+    useMemo(() => {
+      if (breadcrumbs.length <= maxVisibleBreadcrumbParts) {
+        return {
+          visibleBreadcrumbs: breadcrumbs.map((part, idx) => ({ part, originalIndex: idx })),
+          hiddenBreadcrumbs: [] as { part: string; originalIndex: number }[],
+          needsBreadcrumbTruncation: false,
+        };
+      }
+
+      const firstPart = [{ part: breadcrumbs[0], originalIndex: 0 }];
+      const lastPartsCount = maxVisibleBreadcrumbParts - 1;
+      const lastParts = breadcrumbs.slice(-lastPartsCount).map((part, idx) => ({
+        part,
+        originalIndex: breadcrumbs.length - lastPartsCount + idx,
+      }));
+      const hidden = breadcrumbs.slice(1, -lastPartsCount).map((part, idx) => ({
+        part,
+        originalIndex: idx + 1,
+      }));
+
+      return {
+        visibleBreadcrumbs: [...firstPart, ...lastParts],
+        hiddenBreadcrumbs: hidden,
+        needsBreadcrumbTruncation: true,
+      };
+    }, [breadcrumbs, maxVisibleBreadcrumbParts]);
+
+  const breadcrumbPathAtForIndex = useCallback(
+    (index: number) =>
+      breadcrumbPathAt(breadcrumbs, index, currentPath, isLocalSession),
+    [breadcrumbs, currentPath, isLocalSession],
+  );
+
+  const rootLabel = useMemo(
+    () =>
+      isLocalSession && isWindowsPath(currentPath)
+        ? getWindowsDrive(currentPath) ?? "C:"
+        : "/",
+    [currentPath, isLocalSession],
+  );
+
+  const rootPath = useMemo(
+    () => getRootPath(currentPath, isLocalSession),
+    [currentPath, isLocalSession],
+  );
+
+  return {
+    isEditingPath,
+    editingPathValue,
+    setEditingPathValue,
+    pathInputRef,
+    handlePathDoubleClick,
+    handlePathSubmit,
+    handlePathKeyDown,
+    breadcrumbs,
+    visibleBreadcrumbs,
+    hiddenBreadcrumbs,
+    needsBreadcrumbTruncation,
+    breadcrumbPathAtForIndex,
+    rootLabel,
+    rootPath,
+  };
+};

components/sftp-modal/hooks/useSftpModalPermissions.ts

@@ -0,0 +1,189 @@
+import { useCallback, useState } from "react";
+import type { RemoteFile } from "../../../types";
+import { toast } from "../../ui/toast";
+
+interface UseSftpModalPermissionsParams {
+  currentPath: string;
+  isLocalSession: boolean;
+  joinPath: (base: string, name: string) => string;
+  ensureSftp: () => Promise<string>;
+  loadFiles: (path: string, options?: { force?: boolean }) => Promise<void>;
+  chmodSftp: (sftpId: string, path: string, permissions: string) => Promise<void>;
+  statSftp: (sftpId: string, path: string) => Promise<{ permissions?: string }>;
+  t: (key: string, params?: Record<string, unknown>) => string;
+}
+
+interface PermissionsState {
+  owner: { read: boolean; write: boolean; execute: boolean };
+  group: { read: boolean; write: boolean; execute: boolean };
+  others: { read: boolean; write: boolean; execute: boolean };
+}
+
+interface UseSftpModalPermissionsResult {
+  showPermissionsDialog: boolean;
+  setShowPermissionsDialog: (open: boolean) => void;
+  permissionsTarget: RemoteFile | null;
+  permissions: PermissionsState;
+  isChangingPermissions: boolean;
+  openPermissionsDialog: (file: RemoteFile) => Promise<void>;
+  togglePermission: (role: "owner" | "group" | "others", perm: "read" | "write" | "execute") => void;
+  getOctalPermissions: () => string;
+  getSymbolicPermissions: () => string;
+  handleSavePermissions: () => Promise<void>;
+}
+
+export const useSftpModalPermissions = ({
+  currentPath,
+  isLocalSession,
+  joinPath,
+  ensureSftp,
+  loadFiles,
+  chmodSftp,
+  statSftp,
+  t,
+}: UseSftpModalPermissionsParams): UseSftpModalPermissionsResult => {
+  const [showPermissionsDialog, setShowPermissionsDialog] = useState(false);
+  const [permissionsTarget, setPermissionsTarget] = useState<RemoteFile | null>(null);
+  const [permissions, setPermissions] = useState<PermissionsState>({
+    owner: { read: false, write: false, execute: false },
+    group: { read: false, write: false, execute: false },
+    others: { read: false, write: false, execute: false },
+  });
+  const [isChangingPermissions, setIsChangingPermissions] = useState(false);
+
+  const parsePermissions = useCallback((perms: string | undefined) => {
+    const defaultPerms = {
+      owner: { read: false, write: false, execute: false },
+      group: { read: false, write: false, execute: false },
+      others: { read: false, write: false, execute: false },
+    };
+    if (!perms) return defaultPerms;
+
+    if (/^[0-7]{3,4}$/.test(perms)) {
+      const octal = perms.length === 4 ? perms.slice(1) : perms;
+      const ownerBits = parseInt(octal[0], 10);
+      const groupBits = parseInt(octal[1], 10);
+      const othersBits = parseInt(octal[2], 10);
+      return {
+        owner: {
+          read: (ownerBits & 4) !== 0,
+          write: (ownerBits & 2) !== 0,
+          execute: (ownerBits & 1) !== 0,
+        },
+        group: {
+          read: (groupBits & 4) !== 0,
+          write: (groupBits & 2) !== 0,
+          execute: (groupBits & 1) !== 0,
+        },
+        others: {
+          read: (othersBits & 4) !== 0,
+          write: (othersBits & 2) !== 0,
+          execute: (othersBits & 1) !== 0,
+        },
+      };
+    }
+
+    const pStr = perms.length === 10 ? perms.slice(1) : perms;
+    if (pStr.length >= 9) {
+      return {
+        owner: {
+          read: pStr[0] === "r",
+          write: pStr[1] === "w",
+          execute: pStr[2] === "x" || pStr[2] === "s",
+        },
+        group: {
+          read: pStr[3] === "r",
+          write: pStr[4] === "w",
+          execute: pStr[5] === "x" || pStr[5] === "s",
+        },
+        others: {
+          read: pStr[6] === "r",
+          write: pStr[7] === "w",
+          execute: pStr[8] === "x" || pStr[8] === "t",
+        },
+      };
+    }
+    return defaultPerms;
+  }, []);
+
+  const openPermissionsDialog = useCallback(async (file: RemoteFile) => {
+    if (isLocalSession) {
+      toast.error("Permissions not available for local files", "SFTP");
+      return;
+    }
+    setPermissionsTarget(file);
+
+    let permsStr = file.permissions;
+    try {
+      const fullPath = joinPath(currentPath, file.name);
+      const stat = await statSftp(await ensureSftp(), fullPath);
+      if (stat.permissions) {
+        permsStr = stat.permissions;
+      }
+    } catch (e) {
+      console.warn("Failed to fetch file permissions:", e);
+    }
+
+    setPermissions(parsePermissions(permsStr));
+    setShowPermissionsDialog(true);
+  }, [currentPath, ensureSftp, isLocalSession, joinPath, parsePermissions, statSftp]);
+
+  const togglePermission = useCallback(
+    (role: "owner" | "group" | "others", perm: "read" | "write" | "execute") => {
+      setPermissions((prev) => ({
+        ...prev,
+        [role]: { ...prev[role], [perm]: !prev[role][perm] },
+      }));
+    },
+    [],
+  );
+
+  const getOctalPermissions = useCallback(() => {
+    const getNum = (p: { read: boolean; write: boolean; execute: boolean }) =>
+      (p.read ? 4 : 0) + (p.write ? 2 : 0) + (p.execute ? 1 : 0);
+    return `${getNum(permissions.owner)}${getNum(permissions.group)}${getNum(permissions.others)}`;
+  }, [permissions]);
+
+  const getSymbolicPermissions = useCallback(() => {
+    const getSym = (p: { read: boolean; write: boolean; execute: boolean }) =>
+      `${p.read ? "r" : "-"}${p.write ? "w" : "-"}${p.execute ? "x" : "-"}`;
+    return (
+      getSym(permissions.owner) +
+      getSym(permissions.group) +
+      getSym(permissions.others)
+    );
+  }, [permissions]);
+
+  const handleSavePermissions = useCallback(async () => {
+    if (!permissionsTarget || isChangingPermissions) return;
+    setIsChangingPermissions(true);
+    try {
+      const fullPath = joinPath(currentPath, permissionsTarget.name);
+      await chmodSftp(await ensureSftp(), fullPath, getOctalPermissions());
+      setShowPermissionsDialog(false);
+      setPermissionsTarget(null);
+      await loadFiles(currentPath, { force: true });
+      toast.success(t("sftp.permissions.success"), "SFTP");
+    } catch (e) {
+      toast.error(
+        e instanceof Error ? e.message : t("sftp.permissions.failed"),
+        "SFTP",
+      );
+    } finally {
+      setIsChangingPermissions(false);
+    }
+  }, [chmodSftp, currentPath, ensureSftp, getOctalPermissions, isChangingPermissions, joinPath, loadFiles, permissionsTarget, t]);
+
+  return {
+    showPermissionsDialog,
+    setShowPermissionsDialog,
+    permissionsTarget,
+    permissions,
+    isChangingPermissions,
+    openPermissionsDialog,
+    togglePermission,
+    getOctalPermissions,
+    getSymbolicPermissions,
+    handleSavePermissions,
+  };
+};

components/sftp-modal/hooks/useSftpModalRename.ts

@@ -0,0 +1,85 @@
+import { useCallback, useState } from "react";
+import type { RemoteFile } from "../../../types";
+import { toast } from "../../ui/toast";
+
+interface UseSftpModalRenameParams {
+  currentPath: string;
+  isLocalSession: boolean;
+  joinPath: (base: string, name: string) => string;
+  ensureSftp: () => Promise<string>;
+  loadFiles: (path: string, options?: { force?: boolean }) => Promise<void>;
+  renameSftp: (sftpId: string, oldPath: string, newPath: string) => Promise<void>;
+  t: (key: string, params?: Record<string, unknown>) => string;
+}
+
+interface UseSftpModalRenameResult {
+  showRenameDialog: boolean;
+  setShowRenameDialog: (open: boolean) => void;
+  renameTarget: RemoteFile | null;
+  renameName: string;
+  setRenameName: (value: string) => void;
+  isRenaming: boolean;
+  openRenameDialog: (file: RemoteFile) => void;
+  handleRename: () => Promise<void>;
+}
+
+export const useSftpModalRename = ({
+  currentPath,
+  isLocalSession,
+  joinPath,
+  ensureSftp,
+  loadFiles,
+  renameSftp,
+  t,
+}: UseSftpModalRenameParams): UseSftpModalRenameResult => {
+  const [showRenameDialog, setShowRenameDialog] = useState(false);
+  const [renameTarget, setRenameTarget] = useState<RemoteFile | null>(null);
+  const [renameName, setRenameName] = useState("");
+  const [isRenaming, setIsRenaming] = useState(false);
+
+  const openRenameDialog = useCallback((file: RemoteFile) => {
+    setRenameTarget(file);
+    setRenameName(file.name);
+    setShowRenameDialog(true);
+  }, []);
+
+  const handleRename = useCallback(async () => {
+    if (!renameTarget || !renameName.trim() || isRenaming) return;
+    if (renameName.trim() === renameTarget.name) {
+      setShowRenameDialog(false);
+      return;
+    }
+    setIsRenaming(true);
+    try {
+      const oldPath = joinPath(currentPath, renameTarget.name);
+      const newPath = joinPath(currentPath, renameName.trim());
+      if (isLocalSession) {
+        toast.error("Local rename not implemented", "SFTP");
+      } else {
+        await renameSftp(await ensureSftp(), oldPath, newPath);
+      }
+      setShowRenameDialog(false);
+      setRenameTarget(null);
+      setRenameName("");
+      await loadFiles(currentPath, { force: true });
+    } catch (e) {
+      toast.error(
+        e instanceof Error ? e.message : t("sftp.error.renameFailed"),
+        "SFTP",
+      );
+    } finally {
+      setIsRenaming(false);
+    }
+  }, [currentPath, ensureSftp, isLocalSession, joinPath, loadFiles, renameName, renameSftp, renameTarget, t, isRenaming]);
+
+  return {
+    showRenameDialog,
+    setShowRenameDialog,
+    renameTarget,
+    renameName,
+    setRenameName,
+    isRenaming,
+    openRenameDialog,
+    handleRename,
+  };
+};

components/sftp-modal/hooks/useSftpModalSelection.ts

@@ -0,0 +1,99 @@
+import React, { useCallback, useRef } from "react";
+import type { RemoteFile } from "../../../types";
+
+interface UseSftpModalSelectionParams {
+  files: RemoteFile[];
+  setSelectedFiles: (value: Set<string> | ((prev: Set<string>) => Set<string>)) => void;
+  currentPath: string;
+  joinPath: (base: string, name: string) => string;
+  onNavigate: (path: string) => void;
+  onOpenFile: (file: RemoteFile) => void;
+  onNavigateUp: () => void;
+}
+
+interface UseSftpModalSelectionResult {
+  handleFileClick: (file: RemoteFile, index: number, e: React.MouseEvent) => void;
+  handleFileDoubleClick: (file: RemoteFile) => void;
+}
+
+export const useSftpModalSelection = ({
+  files,
+  setSelectedFiles,
+  currentPath,
+  joinPath,
+  onNavigate,
+  onOpenFile,
+  onNavigateUp,
+}: UseSftpModalSelectionParams): UseSftpModalSelectionResult => {
+  const lastSelectedIndexRef = useRef<number | null>(null);
+
+  const handleFileClick = useCallback(
+    (file: RemoteFile, index: number, e: React.MouseEvent) => {
+      if (file.name === "..") return;
+
+      if (file.type === "directory") {
+        if (e.shiftKey && lastSelectedIndexRef.current !== null) {
+          const start = Math.min(lastSelectedIndexRef.current, index);
+          const end = Math.max(lastSelectedIndexRef.current, index);
+          const newSelection = new Set<string>();
+          for (let i = start; i <= end; i++) {
+            if (files[i] && files[i].type !== "directory") {
+              newSelection.add(files[i].name);
+            }
+          }
+          setSelectedFiles(newSelection);
+        } else if (e.ctrlKey || e.metaKey) {
+          setSelectedFiles((prev) => {
+            const next = new Set(prev);
+            return next;
+          });
+        }
+        return;
+      }
+
+      if (e.shiftKey && lastSelectedIndexRef.current !== null) {
+        const start = Math.min(lastSelectedIndexRef.current, index);
+        const end = Math.max(lastSelectedIndexRef.current, index);
+        const newSelection = new Set<string>();
+        for (let i = start; i <= end; i++) {
+          if (files[i] && files[i].type !== "directory") {
+            newSelection.add(files[i].name);
+          }
+        }
+        setSelectedFiles(newSelection);
+      } else if (e.ctrlKey || e.metaKey) {
+        setSelectedFiles((prev) => {
+          const next = new Set(prev);
+          if (next.has(file.name)) {
+            next.delete(file.name);
+          } else {
+            next.add(file.name);
+          }
+          return next;
+        });
+        lastSelectedIndexRef.current = index;
+      } else {
+        setSelectedFiles(new Set([file.name]));
+        lastSelectedIndexRef.current = index;
+      }
+    },
+    [files, setSelectedFiles],
+  );
+
+  const handleFileDoubleClick = useCallback(
+    (file: RemoteFile) => {
+      if (file.name === "..") {
+        onNavigateUp();
+        return;
+      }
+      if (file.type === "directory" || (file.type === "symlink" && file.linkTarget === "directory")) {
+        onNavigate(joinPath(currentPath, file.name));
+      } else {
+        onOpenFile(file);
+      }
+    },
+    [currentPath, joinPath, onNavigate, onNavigateUp, onOpenFile],
+  );
+
+  return { handleFileClick, handleFileDoubleClick };
+};

components/sftp-modal/hooks/useSftpModalSession.ts

@@ -0,0 +1,392 @@
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import type { Host, RemoteFile } from "../../../types";
+import { logger } from "../../../lib/logger";
+import { toast } from "../../ui/toast";
+
+interface UseSftpModalSessionParams {
+  open: boolean;
+  host: Host;
+  credentials: {
+    username?: string;
+    hostname: string;
+    port?: number;
+    password?: string;
+    privateKey?: string;
+    certificate?: string;
+    passphrase?: string;
+    publicKey?: string;
+    keyId?: string;
+    keySource?: "generated" | "imported";
+    proxy?: NetcattyProxyConfig;
+    jumpHosts?: NetcattyJumpHost[];
+    sftpSudo?: boolean;
+  };
+  initialPath?: string;
+  isLocalSession: boolean;
+  t: (key: string, params?: Record<string, unknown>) => string;
+  openSftp: (params: {
+    sessionId: string;
+    hostname: string;
+    username: string;
+    port: number;
+    password?: string;
+    privateKey?: string;
+    certificate?: string;
+    passphrase?: string;
+    publicKey?: string;
+    keyId?: string;
+    keySource?: "generated" | "imported";
+    proxy?: NetcattyProxyConfig;
+    jumpHosts?: NetcattyJumpHost[];
+    sudo?: boolean;
+  }) => Promise<string>;
+  closeSftp: (sftpId: string) => Promise<void>;
+  listSftp: (sftpId: string, path: string) => Promise<RemoteFile[]>;
+  listLocalDir: (path: string) => Promise<RemoteFile[]>;
+  getHomeDir: () => Promise<string | null>;
+  onClearSelection: () => void;
+}
+
+interface UseSftpModalSessionResult {
+  currentPath: string;
+  setCurrentPath: (path: string) => void;
+  files: RemoteFile[];
+  setFiles: (files: RemoteFile[]) => void;
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
+  reconnecting: boolean;
+  ensureSftp: () => Promise<string>;
+  loadFiles: (path: string, options?: { force?: boolean }) => Promise<void>;
+  closeSftpSession: () => Promise<void>;
+  localHomeRef: React.MutableRefObject<string | null>;
+}
+
+export const useSftpModalSession = ({
+  open,
+  host,
+  credentials,
+  initialPath,
+  isLocalSession,
+  t,
+  openSftp,
+  closeSftp,
+  listSftp,
+  listLocalDir,
+  getHomeDir,
+  onClearSelection,
+}: UseSftpModalSessionParams): UseSftpModalSessionResult => {
+  const [currentPath, setCurrentPath] = useState("/");
+  const [files, setFiles] = useState<RemoteFile[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [reconnecting, setReconnecting] = useState(false);
+  const sftpIdRef = useRef<string | null>(null);
+  const initializedRef = useRef(false);
+  const lastInitialPathRef = useRef<string | undefined>(undefined);
+  const localHomeRef = useRef<string | null>(null);
+
+  const reconnectingRef = useRef(false);
+  const reconnectAttemptsRef = useRef(0);
+  const MAX_RECONNECT_ATTEMPTS = 3;
+
+  const DIR_CACHE_TTL_MS = 10_000;
+  const dirCacheRef = useRef<
+    Map<string, { files: RemoteFile[]; timestamp: number }>
+  >(new Map());
+  const loadSeqRef = useRef(0);
+
+  const ensureSftp = useCallback(async () => {
+    if (isLocalSession) throw new Error("Local session does not use SFTP");
+    if (sftpIdRef.current) return sftpIdRef.current;
+    const sftpId = await openSftp({
+      sessionId: `sftp-modal-${host.id}`,
+      hostname: credentials.hostname,
+      username: credentials.username || "root",
+      port: credentials.port || 22,
+      password: credentials.password,
+      privateKey: credentials.privateKey,
+      certificate: credentials.certificate,
+      passphrase: credentials.passphrase,
+      publicKey: credentials.publicKey,
+      keyId: credentials.keyId,
+      keySource: credentials.keySource,
+      proxy: credentials.proxy,
+      jumpHosts: credentials.jumpHosts,
+      sudo: credentials.sftpSudo,
+    });
+    sftpIdRef.current = sftpId;
+    return sftpId;
+  }, [
+    isLocalSession,
+    host.id,
+    credentials.hostname,
+    credentials.username,
+    credentials.port,
+    credentials.password,
+    credentials.privateKey,
+    credentials.certificate,
+    credentials.passphrase,
+    credentials.publicKey,
+    credentials.keyId,
+    credentials.keySource,
+    credentials.proxy,
+    credentials.jumpHosts,
+    credentials.sftpSudo,
+    openSftp,
+  ]);
+
+  const closeSftpSession = useCallback(async () => {
+    if (!isLocalSession && sftpIdRef.current) {
+      try {
+        await closeSftp(sftpIdRef.current);
+      } catch {
+        // Silently ignore close errors - connection may already be closed
+      }
+    }
+    sftpIdRef.current = null;
+  }, [closeSftp, isLocalSession]);
+
+  const isSessionError = useCallback((err: unknown): boolean => {
+    if (!(err instanceof Error)) return false;
+    const msg = err.message.toLowerCase();
+    return (
+      msg.includes("session not found") ||
+      msg.includes("sftp session") ||
+      msg.includes("not found") ||
+      msg.includes("closed") ||
+      msg.includes("connection reset") ||
+      msg.includes("write after end") ||
+      msg.includes("no response") ||
+      msg.includes("client disconnected")
+    );
+  }, []);
+
+  const handleSessionError = useCallback(async () => {
+    if (reconnectingRef.current) return;
+    reconnectingRef.current = true;
+    setReconnecting(true);
+    reconnectAttemptsRef.current = 0;
+
+    while (reconnectAttemptsRef.current < MAX_RECONNECT_ATTEMPTS) {
+      try {
+        reconnectAttemptsRef.current += 1;
+        if (sftpIdRef.current) {
+          try {
+            await closeSftp(sftpIdRef.current);
+          } catch {
+            // ignore
+          }
+          sftpIdRef.current = null;
+        }
+        await ensureSftp();
+        reconnectingRef.current = false;
+        setReconnecting(false);
+        return;
+      } catch (err) {
+        logger.warn(
+          `[SFTP] Reconnect attempt ${reconnectAttemptsRef.current} failed`,
+          err,
+        );
+        if (reconnectAttemptsRef.current >= MAX_RECONNECT_ATTEMPTS) {
+          reconnectingRef.current = false;
+          setReconnecting(false);
+          toast.error(t("sftp.error.reconnectFailed"), "SFTP");
+          return;
+        }
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+    }
+  }, [closeSftp, ensureSftp, t]);
+
+  const loadFiles = useCallback(
+    async (path: string, options?: { force?: boolean }) => {
+      const requestId = ++loadSeqRef.current;
+      setLoading(true);
+      onClearSelection();
+
+      try {
+        if (isLocalSession) {
+          const list = await listLocalDir(path);
+          if (requestId === loadSeqRef.current) {
+            setFiles(list);
+          }
+          return;
+        }
+
+        const cacheKey = `${host.id}::${path}`;
+        const cached = dirCacheRef.current.get(cacheKey);
+        const isFresh =
+          cached && Date.now() - cached.timestamp < DIR_CACHE_TTL_MS;
+        if (cached && isFresh && !options?.force) {
+          setFiles(cached.files);
+          return;
+        }
+
+        const sftpId = await ensureSftp();
+        const list = await listSftp(sftpId, path);
+        if (requestId !== loadSeqRef.current) return;
+        setFiles(list);
+        dirCacheRef.current.set(cacheKey, {
+          files: list,
+          timestamp: Date.now(),
+        });
+      } catch (e) {
+        if (!isLocalSession && isSessionError(e) && files.length > 0) {
+          logger.info("[SFTP] Session lost, attempting to reconnect...");
+          handleSessionError();
+          return;
+        }
+
+        logger.error("Failed to load files", e);
+        toast.error(
+          e instanceof Error ? e.message : t("sftp.error.loadFailed"),
+          "SFTP",
+        );
+        setFiles([]);
+      } finally {
+        if (loadSeqRef.current === requestId) {
+          setLoading(false);
+        }
+      }
+    },
+    [ensureSftp, host.id, isLocalSession, listLocalDir, listSftp, t, isSessionError, handleSessionError, files.length, onClearSelection],
+  );
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    const cacheKey = `${host.id}::${currentPath}`;
+    const cached = dirCacheRef.current.get(cacheKey);
+    const isFresh = cached && Date.now() - cached.timestamp < DIR_CACHE_TTL_MS;
+    if (!isFresh) {
+      setFiles([]);
+      onClearSelection();
+    }
+  }, [currentPath, host.id, onClearSelection, open]);
+
+  useEffect(() => {
+    if (open) {
+      if (!initializedRef.current || lastInitialPathRef.current !== initialPath) {
+        initializedRef.current = true;
+        lastInitialPathRef.current = initialPath;
+        onClearSelection();
+        setLoading(true);
+
+        if (isLocalSession) {
+          (async () => {
+            const homePath = await getHomeDir();
+            localHomeRef.current = homePath ?? null;
+            const startPath = initialPath || homePath || "/";
+            try {
+              const list = await listLocalDir(startPath);
+              setCurrentPath(startPath);
+              setFiles(list);
+              dirCacheRef.current.set(`${host.id}::${startPath}`, {
+                files: list,
+                timestamp: Date.now(),
+              });
+            } catch (e) {
+              toast.error(
+                e instanceof Error ? e.message : t("sftp.error.loadFailed"),
+                "SFTP",
+              );
+            } finally {
+              setLoading(false);
+            }
+          })();
+          return;
+        }
+
+        (async () => {
+          const homePath = await getHomeDir();
+          localHomeRef.current = homePath ?? null;
+          if (initialPath) {
+            try {
+              const sftpId = await ensureSftp();
+              const list = await listSftp(sftpId, initialPath);
+              setCurrentPath(initialPath);
+              setFiles(list);
+              dirCacheRef.current.set(`${host.id}::${initialPath}`, {
+                files: list,
+                timestamp: Date.now(),
+              });
+              setLoading(false);
+              return;
+            } catch {
+              logger.warn(
+                `[SFTP] Initial path ${initialPath} not accessible, falling back to home`,
+              );
+            }
+          }
+
+          try {
+            const sftpId = await ensureSftp();
+            const list = await listSftp(sftpId, homePath || "/");
+            setCurrentPath(homePath || "/");
+            setFiles(list);
+            dirCacheRef.current.set(`${host.id}::${homePath || "/"}`, {
+              files: list,
+              timestamp: Date.now(),
+            });
+            setLoading(false);
+          } catch {
+            logger.warn(`[SFTP] Home ${homePath} not accessible, using /`);
+            try {
+              const sftpId = await ensureSftp();
+              const list = await listSftp(sftpId, "/");
+              setCurrentPath("/");
+              setFiles(list);
+              dirCacheRef.current.set(`${host.id}::/`, {
+                files: list,
+                timestamp: Date.now(),
+              });
+            } catch (e) {
+              logger.error("[SFTP] Failed to load root directory", e);
+              toast.error(t("sftp.error.loadFailed"), "SFTP");
+            } finally {
+              setLoading(false);
+            }
+          }
+        })();
+        return;
+      }
+      void loadFiles(currentPath);
+    } else {
+      loadSeqRef.current += 1;
+      void closeSftpSession();
+      initializedRef.current = false;
+    }
+  }, [
+    closeSftpSession,
+    currentPath,
+    ensureSftp,
+    getHomeDir,
+    host.id,
+    initialPath,
+    isLocalSession,
+    listLocalDir,
+    listSftp,
+    loadFiles,
+    onClearSelection,
+    open,
+    t,
+  ]);
+
+  useEffect(() => {
+    return () => {
+      void closeSftpSession();
+    };
+  }, [closeSftpSession]);
+
+  return {
+    currentPath,
+    setCurrentPath,
+    files,
+    setFiles,
+    loading,
+    setLoading,
+    reconnecting,
+    ensureSftp,
+    loadFiles,
+    closeSftpSession,
+    localHomeRef,
+  };
+};

components/sftp-modal/hooks/useSftpModalSorting.ts

@@ -0,0 +1,76 @@
+import React, { useCallback, useRef, useState } from "react";
+
+export type SortField = "name" | "size" | "modified";
+export type SortOrder = "asc" | "desc";
+
+interface UseSftpModalSortingResult {
+  sortField: SortField;
+  sortOrder: SortOrder;
+  columnWidths: { name: number; size: number; modified: number; actions: number };
+  handleSort: (field: SortField) => void;
+  handleResizeStart: (field: string, e: React.MouseEvent) => void;
+}
+
+export const useSftpModalSorting = (): UseSftpModalSortingResult => {
+  const [sortField, setSortField] = useState<SortField>("name");
+  const [sortOrder, setSortOrder] = useState<SortOrder>("asc");
+  const [columnWidths, setColumnWidths] = useState({
+    name: 45,
+    size: 15,
+    modified: 25,
+    actions: 15,
+  });
+
+  const resizingRef = useRef<{
+    field: string;
+    startX: number;
+    startWidth: number;
+  } | null>(null);
+
+  const handleSort = (field: SortField) => {
+    if (sortField === field) {
+      setSortOrder((prev) => (prev === "asc" ? "desc" : "asc"));
+    } else {
+      setSortField(field);
+      setSortOrder("asc");
+    }
+  };
+
+  const handleResizeMove = useCallback((e: MouseEvent) => {
+    if (!resizingRef.current) return;
+    const diff = e.clientX - resizingRef.current.startX;
+    const newWidth = Math.max(
+      10,
+      Math.min(60, resizingRef.current.startWidth + diff / 5),
+    );
+    setColumnWidths((prev) => ({
+      ...prev,
+      [resizingRef.current!.field]: newWidth,
+    }));
+  }, []);
+
+  const handleResizeEnd = useCallback(() => {
+    resizingRef.current = null;
+    document.removeEventListener("mousemove", handleResizeMove);
+    document.removeEventListener("mouseup", handleResizeEnd);
+  }, [handleResizeMove]);
+
+  const handleResizeStart = (field: string, e: React.MouseEvent) => {
+    e.preventDefault();
+    resizingRef.current = {
+      field,
+      startX: e.clientX,
+      startWidth: columnWidths[field as keyof typeof columnWidths],
+    };
+    document.addEventListener("mousemove", handleResizeMove);
+    document.addEventListener("mouseup", handleResizeEnd);
+  };
+
+  return {
+    sortField,
+    sortOrder,
+    columnWidths,
+    handleSort,
+    handleResizeStart,
+  };
+};

components/sftp-modal/hooks/useSftpModalTextEditor.ts

@@ -0,0 +1,87 @@
+import { useCallback, useState } from "react";
+import type { RemoteFile } from "../../../types";
+import { toast } from "../../ui/toast";
+
+interface UseSftpModalTextEditorParams {
+  currentPath: string;
+  isLocalSession: boolean;
+  joinPath: (base: string, name: string) => string;
+  ensureSftp: () => Promise<string>;
+  readLocalFile: (path: string) => Promise<ArrayBuffer>;
+  readSftp: (sftpId: string, path: string) => Promise<string>;
+  writeLocalFile: (path: string, data: ArrayBuffer) => Promise<void>;
+  writeSftp: (sftpId: string, path: string, data: string) => Promise<void>;
+  t: (key: string, params?: Record<string, unknown>) => string;
+}
+
+interface UseSftpModalTextEditorResult {
+  showTextEditor: boolean;
+  setShowTextEditor: (open: boolean) => void;
+  textEditorTarget: RemoteFile | null;
+  setTextEditorTarget: (target: RemoteFile | null) => void;
+  textEditorContent: string;
+  setTextEditorContent: (value: string) => void;
+  loadingTextContent: boolean;
+  handleEditFile: (file: RemoteFile) => Promise<void>;
+  handleSaveTextFile: (content: string) => Promise<void>;
+}
+
+export const useSftpModalTextEditor = ({
+  currentPath,
+  isLocalSession,
+  joinPath,
+  ensureSftp,
+  readLocalFile,
+  readSftp,
+  writeLocalFile,
+  writeSftp,
+  t,
+}: UseSftpModalTextEditorParams): UseSftpModalTextEditorResult => {
+  const [showTextEditor, setShowTextEditor] = useState(false);
+  const [textEditorTarget, setTextEditorTarget] = useState<RemoteFile | null>(null);
+  const [textEditorContent, setTextEditorContent] = useState("");
+  const [loadingTextContent, setLoadingTextContent] = useState(false);
+
+  const handleEditFile = useCallback(async (file: RemoteFile) => {
+    try {
+      setLoadingTextContent(true);
+      setTextEditorTarget(file);
+      const fullPath = joinPath(currentPath, file.name);
+      const content = isLocalSession
+        ? await readLocalFile(fullPath).then((buf) => new TextDecoder().decode(buf))
+        : await readSftp(await ensureSftp(), fullPath);
+      setTextEditorContent(content);
+      setShowTextEditor(true);
+    } catch (e) {
+      toast.error(
+        e instanceof Error ? e.message : t("sftp.error.loadFailed"),
+        "SFTP",
+      );
+    } finally {
+      setLoadingTextContent(false);
+    }
+  }, [currentPath, ensureSftp, isLocalSession, joinPath, readLocalFile, readSftp, t]);
+
+  const handleSaveTextFile = useCallback(async (content: string) => {
+    if (!textEditorTarget) return;
+    const fullPath = joinPath(currentPath, textEditorTarget.name);
+    if (isLocalSession) {
+      const encoder = new TextEncoder();
+      await writeLocalFile(fullPath, encoder.encode(content).buffer);
+    } else {
+      await writeSftp(await ensureSftp(), fullPath, content);
+    }
+  }, [currentPath, ensureSftp, isLocalSession, joinPath, textEditorTarget, writeLocalFile, writeSftp]);
+
+  return {
+    showTextEditor,
+    setShowTextEditor,
+    textEditorTarget,
+    setTextEditorTarget,
+    textEditorContent,
+    setTextEditorContent,
+    loadingTextContent,
+    handleEditFile,
+    handleSaveTextFile,
+  };
+};

components/sftp-modal/hooks/useSftpModalTransfers.ts

@@ -0,0 +1,476 @@
+import React, { useCallback, useState, useRef, useMemo } from "react";
+import type { RemoteFile } from "../../../types";
+import { toast } from "../../ui/toast";
+import {
+  UploadController,
+  uploadFromDataTransfer,
+  uploadFromFileList,
+  UploadBridge,
+  UploadCallbacks,
+  UploadTaskInfo,
+  UploadProgress,
+} from "../../../lib/uploadService";
+
+interface UploadTask {
+  id: string;
+  fileName: string;
+  status: "pending" | "uploading" | "completed" | "failed" | "cancelled";
+  progress: number;
+  totalBytes: number;
+  transferredBytes: number;
+  speed: number;
+  startTime: number;
+  error?: string;
+  isDirectory?: boolean;
+  fileCount?: number;
+  completedCount?: number;
+}
+
+interface UseSftpModalTransfersParams {
+  currentPath: string;
+  isLocalSession: boolean;
+  joinPath: (base: string, name: string) => string;
+  ensureSftp: () => Promise<string>;
+  loadFiles: (path: string, options?: { force?: boolean }) => Promise<void>;
+  readLocalFile: (path: string) => Promise<ArrayBuffer>;
+  readSftp: (sftpId: string, path: string) => Promise<string>;
+  writeLocalFile: (path: string, data: ArrayBuffer) => Promise<void>;
+  writeSftpBinaryWithProgress: (
+    sftpId: string,
+    path: string,
+    data: ArrayBuffer,
+    taskId: string,
+    onProgress: (transferred: number, total: number, speed: number) => void,
+    onComplete: () => void,
+    onError: (error: string) => void,
+  ) => Promise<boolean>;
+  writeSftpBinary: (sftpId: string, path: string, data: ArrayBuffer) => Promise<void>;
+  writeSftp: (sftpId: string, path: string, data: string) => Promise<void>;
+  mkdirLocal: (path: string) => Promise<void>;
+  mkdirSftp: (sftpId: string, path: string) => Promise<void>;
+  cancelSftpUpload?: (taskId: string) => Promise<unknown>;
+  setLoading: (loading: boolean) => void;
+  t: (key: string, params?: Record<string, unknown>) => string;
+}
+
+interface UseSftpModalTransfersResult {
+  uploading: boolean;
+  uploadTasks: UploadTask[];
+  dragActive: boolean;
+  handleDownload: (file: RemoteFile) => Promise<void>;
+  handleUploadMultiple: (fileList: FileList) => Promise<void>;
+  handleUploadFromDrop: (dataTransfer: DataTransfer) => Promise<void>;
+  handleFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleDrag: (e: React.DragEvent) => void;
+  handleDrop: (e: React.DragEvent) => void;
+  cancelUpload: () => Promise<void>;
+  dismissTask: (taskId: string) => void;
+}
+
+export const useSftpModalTransfers = ({
+  currentPath,
+  isLocalSession,
+  joinPath,
+  ensureSftp,
+  loadFiles,
+  readLocalFile,
+  readSftp,
+  writeLocalFile,
+  writeSftpBinaryWithProgress,
+  writeSftpBinary,
+  mkdirLocal,
+  mkdirSftp,
+  cancelSftpUpload,
+  setLoading,
+  t,
+}: UseSftpModalTransfersParams): UseSftpModalTransfersResult => {
+  const [uploading, setUploading] = useState(false);
+  const [uploadTasks, setUploadTasks] = useState<UploadTask[]>([]);
+  const [dragActive, setDragActive] = useState(false);
+
+  // Upload controller for cancellation support
+  const uploadControllerRef = useRef<UploadController | null>(null);
+
+  // Cached SFTP ID to avoid multiple calls to ensureSftp
+  const cachedSftpIdRef = useRef<string | null>(null);
+
+  // Track cancelled transfer IDs to detect cancellation in bridge wrapper
+  const cancelledTransferIdsRef = useRef<Set<string>>(new Set());
+
+  const handleDownload = useCallback(
+    async (file: RemoteFile) => {
+      try {
+        const fullPath = joinPath(currentPath, file.name);
+        setLoading(true);
+        const content = isLocalSession
+          ? await readLocalFile(fullPath)
+          : await readSftp(await ensureSftp(), fullPath);
+        const blob = new Blob([content], { type: "application/octet-stream" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = file.name;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+      } catch (e) {
+        toast.error(
+          e instanceof Error ? e.message : t("sftp.error.downloadFailed"),
+          "SFTP",
+        );
+      } finally {
+        setLoading(false);
+      }
+    },
+    [currentPath, ensureSftp, isLocalSession, joinPath, readLocalFile, readSftp, setLoading, t],
+  );
+
+  // Create upload bridge that adapts the modal's functions to the service interface
+  const createUploadBridge = useMemo((): UploadBridge => {
+    return {
+      writeLocalFile,
+      mkdirLocal,
+      mkdirSftp: async (sftpId: string, path: string) => {
+        await mkdirSftp(sftpId, path);
+      },
+      writeSftpBinary: async (sftpId: string, path: string, data: ArrayBuffer) => {
+        await writeSftpBinary(sftpId, path, data);
+      },
+      writeSftpBinaryWithProgress: async (
+        sftpId: string,
+        path: string,
+        data: ArrayBuffer,
+        taskId: string,
+        onProgress: (transferred: number, total: number, speed: number) => void,
+        _onComplete?: () => void,
+        _onError?: (error: string) => void
+      ) => {
+        try {
+          const result = await writeSftpBinaryWithProgress(
+            sftpId,
+            path,
+            data,
+            taskId,
+            onProgress,
+            () => { },
+            () => { }
+          );
+          // Check if this transfer was cancelled
+          const wasCancelled = cancelledTransferIdsRef.current.has(taskId);
+          if (wasCancelled) {
+            cancelledTransferIdsRef.current.delete(taskId);
+          }
+          return { success: result, cancelled: wasCancelled };
+        } catch (error) {
+          // Check if this was a user-initiated cancellation
+          const wasCancelled = cancelledTransferIdsRef.current.has(taskId);
+          if (wasCancelled) {
+            cancelledTransferIdsRef.current.delete(taskId);
+            return { success: false, cancelled: true };
+          }
+          // Real error - propagate it by re-throwing
+          throw error;
+        }
+      },
+      cancelSftpUpload,
+    };
+  }, [writeLocalFile, mkdirLocal, mkdirSftp, writeSftpBinary, writeSftpBinaryWithProgress, cancelSftpUpload]);
+
+  // Create upload callbacks
+  const createUploadCallbacks = useCallback((): UploadCallbacks => {
+    return {
+      onScanningStart: (taskId: string) => {
+        const scanningTask: UploadTask = {
+          id: taskId,
+          fileName: "Scanning files...",
+          status: "pending",
+          progress: 0,
+          totalBytes: 0,
+          transferredBytes: 0,
+          speed: 0,
+          startTime: Date.now(),
+          isDirectory: true,
+        };
+        setUploadTasks(prev => [...prev, scanningTask]);
+      },
+      onScanningEnd: (taskId: string) => {
+        setUploadTasks(prev => prev.filter(t => t.id !== taskId));
+      },
+      onTaskCreated: (task: UploadTaskInfo) => {
+        const uploadTask: UploadTask = {
+          id: task.id,
+          fileName: task.displayName,
+          status: "uploading",
+          progress: 0,
+          totalBytes: task.totalBytes,
+          transferredBytes: 0,
+          speed: 0,
+          startTime: Date.now(),
+          isDirectory: task.isDirectory,
+          fileCount: task.fileCount,
+          completedCount: 0,
+        };
+        // Filter out any pending scanning tasks before adding the real task.
+        // This ensures that even if onScanningEnd's state update hasn't been applied yet
+        // (due to React state batching), the scanning placeholder will still be removed.
+        setUploadTasks(prev => [
+          ...prev.filter(t => !(t.status === "pending" && t.fileName === "Scanning files...")),
+          uploadTask
+        ]);
+      },
+      onTaskProgress: (taskId: string, progress: UploadProgress) => {
+        setUploadTasks(prev =>
+          prev.map(task =>
+            task.id === taskId && task.status === "uploading"
+              ? {
+                ...task,
+                transferredBytes: progress.transferred,
+                progress: progress.percent,
+                speed: progress.speed,
+              }
+              : task
+          )
+        );
+      },
+      onTaskCompleted: (taskId: string, totalBytes: number) => {
+        setUploadTasks(prev =>
+          prev.map(task =>
+            task.id === taskId
+              ? {
+                ...task,
+                status: "completed" as const,
+                progress: 100,
+                transferredBytes: totalBytes,
+                speed: 0,
+              }
+              : task
+          )
+        );
+      },
+      onTaskFailed: (taskId: string, error: string) => {
+        // Any error marks the task as failed
+        setUploadTasks(prev =>
+          prev.map(task =>
+            task.id === taskId
+              ? {
+                ...task,
+                status: "failed" as const,
+                error,
+                speed: 0,
+              }
+              : task
+          )
+        );
+
+        // Auto-clear failed tasks after 3 seconds
+        setTimeout(() => {
+          setUploadTasks(prev => prev.filter(t => t.id !== taskId));
+        }, 3000);
+      },
+      onTaskCancelled: (taskId: string) => {
+        setUploadTasks(prev =>
+          prev.map(task =>
+            task.id === taskId
+              ? {
+                ...task,
+                status: "cancelled" as const,
+                speed: 0,
+              }
+              : task
+          )
+        );
+        // Auto-clear cancelled tasks after 2 seconds
+        setTimeout(() => {
+          setUploadTasks(prev => prev.filter(t => t.id !== taskId));
+        }, 2000);
+      },
+    };
+  }, []);
+
+  const handleUploadMultiple = useCallback(
+    async (fileList: FileList) => {
+      if (fileList.length === 0) return;
+
+      setUploading(true);
+
+      // Get SFTP ID for remote sessions
+      let sftpId: string | null = null;
+      if (!isLocalSession) {
+        sftpId = await ensureSftp();
+        cachedSftpIdRef.current = sftpId;
+      }
+
+      // Create controller for cancellation
+      const controller = new UploadController();
+      uploadControllerRef.current = controller;
+
+      const callbacks = createUploadCallbacks();
+
+      try {
+        await uploadFromFileList(
+          fileList,
+          {
+            targetPath: currentPath,
+            sftpId,
+            isLocal: isLocalSession,
+            bridge: createUploadBridge,
+            joinPath,
+            callbacks,
+          },
+          controller
+        );
+
+        await loadFiles(currentPath, { force: true });
+
+        // Auto-clear completed tasks after 3 seconds
+        setTimeout(() => {
+          setUploadTasks(prev => prev.filter(t => t.status !== "completed"));
+        }, 3000);
+      } catch (error) {
+        toast.error(
+          error instanceof Error ? error.message : t("sftp.error.uploadFailed"),
+          "SFTP"
+        );
+      } finally {
+        setUploading(false);
+        uploadControllerRef.current = null;
+        cachedSftpIdRef.current = null;
+      }
+    },
+    [currentPath, createUploadBridge, createUploadCallbacks, ensureSftp, isLocalSession, joinPath, loadFiles, t],
+  );
+
+  const handleUploadFromDrop = useCallback(
+    async (dataTransfer: DataTransfer) => {
+      setUploading(true);
+
+      // Get SFTP ID for remote sessions
+      let sftpId: string | null = null;
+      if (!isLocalSession) {
+        sftpId = await ensureSftp();
+        cachedSftpIdRef.current = sftpId;
+      }
+
+      // Create controller for cancellation
+      const controller = new UploadController();
+      uploadControllerRef.current = controller;
+
+      const callbacks = createUploadCallbacks();
+
+      try {
+        await uploadFromDataTransfer(
+          dataTransfer,
+          {
+            targetPath: currentPath,
+            sftpId,
+            isLocal: isLocalSession,
+            bridge: createUploadBridge,
+            joinPath,
+            callbacks,
+          },
+          controller
+        );
+
+        await loadFiles(currentPath, { force: true });
+
+        // Auto-clear completed tasks after 3 seconds
+        setTimeout(() => {
+          setUploadTasks(prev => prev.filter(t => t.status !== "completed"));
+        }, 3000);
+      } catch (error) {
+        toast.error(
+          error instanceof Error ? error.message : t("sftp.error.uploadFailed"),
+          "SFTP"
+        );
+      } finally {
+        setUploading(false);
+        uploadControllerRef.current = null;
+        cachedSftpIdRef.current = null;
+      }
+    },
+    [currentPath, createUploadBridge, createUploadCallbacks, ensureSftp, isLocalSession, joinPath, loadFiles, t],
+  );
+
+  const handleFileSelect = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files && e.target.files.length > 0) {
+        void handleUploadMultiple(e.target.files);
+      }
+      e.target.value = "";
+    },
+    [handleUploadMultiple],
+  );
+
+  const handleDrag = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive(true);
+    } else if (e.type === "dragleave") {
+      setDragActive(false);
+    }
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragActive(false);
+      if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+        void handleUploadFromDrop(e.dataTransfer);
+      }
+    },
+    [handleUploadFromDrop],
+  );
+
+  const cancelUpload = useCallback(async () => {
+    const controller = uploadControllerRef.current;
+    if (controller) {
+      // Mark all active transfer IDs as cancelled before calling cancel
+      const activeIds = controller.getActiveTransferIds();
+      for (const id of activeIds) {
+        cancelledTransferIdsRef.current.add(id);
+      }
+      await controller.cancel();
+    }
+
+    // Always clear all uploading/pending tasks immediately, even without controller
+    setUploadTasks(prev => {
+      const hasActiveTasks = prev.some(t => t.status === "uploading" || t.status === "pending");
+      if (!hasActiveTasks) return prev;
+
+      return prev.map(task =>
+        task.status === "uploading" || task.status === "pending"
+          ? { ...task, status: "cancelled" as const, speed: 0 }
+          : task
+      );
+    });
+
+    // Auto-clear cancelled tasks after 2 seconds
+    setTimeout(() => {
+      setUploadTasks(prev => prev.filter(t => t.status !== "cancelled"));
+    }, 2000);
+
+    // Also reset uploading state
+    setUploading(false);
+  }, []);
+
+  const dismissTask = useCallback((taskId: string) => {
+    setUploadTasks(prev => prev.filter(t => t.id !== taskId));
+  }, []);
+
+  return {
+    uploading,
+    uploadTasks,
+    dragActive,
+    handleDownload,
+    handleUploadMultiple,
+    handleUploadFromDrop,
+    handleFileSelect,
+    handleDrag,
+    handleDrop,
+    cancelUpload,
+    dismissTask,
+  };
+};

components/sftp-modal/hooks/useSftpModalVirtualList.ts

@@ -0,0 +1,123 @@
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import type { RemoteFile } from "../../../types";
+
+interface UseSftpModalVirtualListParams {
+  open: boolean;
+  sortedFiles: RemoteFile[];
+}
+
+interface UseSftpModalVirtualListResult {
+  fileListRef: React.RefObject<HTMLDivElement>;
+  rowHeight: number;
+  handleFileListScroll: (e: React.UIEvent<HTMLDivElement>) => void;
+  shouldVirtualize: boolean;
+  totalHeight: number;
+  visibleRows: { file: RemoteFile; index: number; top: number }[];
+}
+
+export const useSftpModalVirtualList = ({
+  open,
+  sortedFiles,
+}: UseSftpModalVirtualListParams): UseSftpModalVirtualListResult => {
+  const fileListRef = useRef<HTMLDivElement>(null);
+  const scrollFrameRef = useRef<number | null>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [viewportHeight, setViewportHeight] = useState(0);
+  const [rowHeight, setRowHeight] = useState(40);
+
+  useLayoutEffect(() => {
+    const container = fileListRef.current;
+    if (!container || !open) return;
+    const update = () => setViewportHeight(container.clientHeight);
+    update();
+    const raf = window.requestAnimationFrame(update);
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(container);
+    return () => {
+      resizeObserver.disconnect();
+      window.cancelAnimationFrame(raf);
+    };
+  }, [open, sortedFiles.length]);
+
+  useLayoutEffect(() => {
+    const container = fileListRef.current;
+    if (!container || !open || sortedFiles.length === 0) return;
+    const raf = window.requestAnimationFrame(() => {
+      const rowElement = container.querySelector(
+        '[data-sftp-modal-row="true"]',
+      ) as HTMLElement | null;
+      if (!rowElement) return;
+      const nextHeight = Math.round(rowElement.getBoundingClientRect().height);
+      if (nextHeight && Math.abs(nextHeight - rowHeight) > 1) {
+        setRowHeight(nextHeight);
+      }
+    });
+    return () => window.cancelAnimationFrame(raf);
+  }, [open, rowHeight, sortedFiles.length]);
+
+  useEffect(() => {
+    return () => {
+      if (scrollFrameRef.current !== null) {
+        window.cancelAnimationFrame(scrollFrameRef.current);
+      }
+    };
+  }, []);
+
+  const handleFileListScroll = useCallback(
+    (e: React.UIEvent<HTMLDivElement>) => {
+      const nextTop = e.currentTarget.scrollTop;
+      if (scrollFrameRef.current !== null) return;
+      scrollFrameRef.current = window.requestAnimationFrame(() => {
+        scrollFrameRef.current = null;
+        setScrollTop(nextTop);
+      });
+    },
+    [],
+  );
+
+  const { shouldVirtualize, totalHeight, visibleRows } = useMemo(() => {
+    const overscan = 6;
+    const canVirtualize = open && viewportHeight > 0 && rowHeight > 0;
+    const shouldVirtualizeLocal = canVirtualize && sortedFiles.length > 50;
+    const totalHeightLocal = shouldVirtualizeLocal
+      ? sortedFiles.length * rowHeight
+      : 0;
+    const startIndex = shouldVirtualizeLocal
+      ? Math.max(0, Math.floor(scrollTop / rowHeight) - overscan)
+      : 0;
+    const endIndex = shouldVirtualizeLocal
+      ? Math.min(
+        sortedFiles.length - 1,
+        Math.ceil((scrollTop + viewportHeight) / rowHeight) + overscan,
+      )
+      : sortedFiles.length - 1;
+    const visibleRowsLocal = shouldVirtualizeLocal
+      ? sortedFiles
+        .slice(startIndex, endIndex + 1)
+        .map((file, idx) => ({
+          file,
+          index: startIndex + idx,
+          top: (startIndex + idx) * rowHeight,
+        }))
+      : sortedFiles.map((file, index) => ({
+        file,
+        index,
+        top: 0,
+      }));
+
+    return {
+      shouldVirtualize: shouldVirtualizeLocal,
+      totalHeight: totalHeightLocal,
+      visibleRows: visibleRowsLocal,
+    };
+  }, [open, rowHeight, scrollTop, sortedFiles, viewportHeight]);
+
+  return {
+    fileListRef,
+    rowHeight,
+    handleFileListScroll,
+    shouldVirtualize,
+    totalHeight,
+    visibleRows,
+  };
+};

components/sftp-modal/pathUtils.ts

@@ -0,0 +1,83 @@
+export const isWindowsPath = (path: string): boolean => /^[A-Za-z]:/.test(path);
+
+export const normalizeWindowsRoot = (path: string): string => {
+  const normalized = path.replace(/\//g, "\\");
+  if (/^[A-Za-z]:\\$/.test(normalized)) return normalized;
+  if (/^[A-Za-z]:$/.test(normalized)) return `${normalized}\\`;
+  return normalized;
+};
+
+export const joinPath = (base: string, name: string, isLocalSession: boolean): string => {
+  if (isLocalSession && isWindowsPath(base)) {
+    const normalizedBase = normalizeWindowsRoot(base).replace(/[\\/]+$/, "");
+    return `${normalizedBase}\\${name}`;
+  }
+  if (base === "/") return `/${name}`;
+  return `${base}/${name}`;
+};
+
+export const isRootPath = (path: string, isLocalSession: boolean): boolean => {
+  if (isLocalSession && isWindowsPath(path)) {
+    return /^[A-Za-z]:\\?$/.test(path.replace(/\//g, "\\"));
+  }
+  return path === "/";
+};
+
+export const getParentPath = (path: string, isLocalSession: boolean): string => {
+  if (isLocalSession && isWindowsPath(path)) {
+    const normalized = normalizeWindowsRoot(path).replace(/[\\]+$/, "");
+    const drive = normalized.slice(0, 2);
+    if (/^[A-Za-z]:$/.test(normalized) || /^[A-Za-z]:\\$/.test(normalized)) {
+      return `${drive}\\`;
+    }
+    const rest = normalized.slice(2).replace(/^[\\]+/, "");
+    const parts = rest ? rest.split(/[\\]+/).filter(Boolean) : [];
+    if (parts.length <= 1) return `${drive}\\`;
+    parts.pop();
+    return `${drive}\\${parts.join("\\")}`;
+  }
+  if (path === "/") return "/";
+  const parts = path.split("/").filter(Boolean);
+  parts.pop();
+  return parts.length ? `/${parts.join("/")}` : "/";
+};
+
+export const getRootPath = (path: string, isLocalSession: boolean): string => {
+  if (isLocalSession && isWindowsPath(path)) {
+    const drive = path.replace(/\//g, "\\").slice(0, 2);
+    return `${drive}\\`;
+  }
+  return "/";
+};
+
+export const getWindowsDrive = (path: string): string | null => {
+  if (!isWindowsPath(path)) return null;
+  const normalized = path.replace(/\//g, "\\");
+  return /^[A-Za-z]:/.test(normalized) ? normalized.slice(0, 2) : null;
+};
+
+export const getBreadcrumbs = (path: string, isLocalSession: boolean): string[] => {
+  if (isLocalSession && isWindowsPath(path)) {
+    const normalized = normalizeWindowsRoot(path).replace(/[\\]+$/, "");
+    const rest = normalized.slice(2).replace(/^[\\]+/, "");
+    const parts = rest ? rest.split(/[\\]+/).filter(Boolean) : [];
+    return parts;
+  }
+  return path === "/" ? [] : path.split("/").filter(Boolean);
+};
+
+export const breadcrumbPathAt = (
+  breadcrumbs: string[],
+  idx: number,
+  currentPath: string,
+  isLocalSession: boolean,
+): string => {
+  if (isLocalSession) {
+    const drive = getWindowsDrive(currentPath);
+    if (drive) {
+      const rest = breadcrumbs.slice(0, idx + 1).join("\\");
+      return rest ? `${drive}\\${rest}` : `${drive}\\`;
+    }
+  }
+  return "/" + breadcrumbs.slice(0, idx + 1).join("/");
+};

components/sftp-modal/utils.ts

@@ -0,0 +1,15 @@
+export const formatBytes = (bytes: number | string): string => {
+  const numBytes = typeof bytes === "string" ? parseInt(bytes, 10) : bytes;
+  if (isNaN(numBytes) || numBytes === 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(numBytes) / Math.log(1024));
+  const size = numBytes / Math.pow(1024, i);
+  return `${size.toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
+};
+
+export const formatDate = (dateStr: string | number | undefined, locale?: string): string => {
+  if (!dateStr) return "--";
+  const date = typeof dateStr === "number" ? new Date(dateStr) : new Date(dateStr);
+  if (isNaN(date.getTime())) return String(dateStr);
+  return date.toLocaleString(locale || undefined);
+};

components/sftp/SftpBreadcrumb.tsx

@@ -31,7 +31,12 @@ const SftpBreadcrumbInner: React.FC<SftpBreadcrumbProps> = ({
     // For Windows, first part might be drive letter like "C:"
     const buildPath = (index: number) => {
         if (isWindowsPath) {
-            return parts.slice(0, index + 1).join('\\');
+            const builtPath = parts.slice(0, index + 1).join('\\');
+            // If this is just a drive letter (e.g., "C:"), add trailing backslash
+            if (/^[A-Za-z]:$/.test(builtPath)) {
+                return builtPath + '\\';
+            }
+            return builtPath;
         }
         return '/' + parts.slice(0, index + 1).join('/');
     };

components/sftp/SftpConflictDialog.tsx

@@ -3,10 +3,10 @@
  */
 
 import { AlertCircle } from 'lucide-react';
-import React,{ useState } from 'react';
+import React, { memo, useState } from 'react';
 import { useI18n } from '../../application/i18n/I18nProvider';
 import { Button } from '../ui/button';
-import { Dialog,DialogContent,DialogDescription,DialogFooter,DialogHeader,DialogTitle } from '../ui/dialog';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog';
 
 interface ConflictItem {
     transferId: string;
@@ -25,7 +25,7 @@ interface SftpConflictDialogProps {
     formatFileSize: (size: number) => string;
 }
 
-export const SftpConflictDialog: React.FC<SftpConflictDialogProps> = ({ conflicts, onResolve, formatFileSize }) => {
+const SftpConflictDialogInner: React.FC<SftpConflictDialogProps> = ({ conflicts, onResolve, formatFileSize }) => {
     const { t } = useI18n();
     const [applyToAll, setApplyToAll] = useState(false);
     const conflict = conflicts[0]; // Handle first conflict
@@ -135,3 +135,6 @@ export const SftpConflictDialog: React.FC<SftpConflictDialogProps> = ({ conflict
         </Dialog>
     );
 };
+
+export const SftpConflictDialog = memo(SftpConflictDialogInner);
+SftpConflictDialog.displayName = 'SftpConflictDialog';

components/sftp/SftpContext.tsx

@@ -0,0 +1,175 @@
+/**
+ * SftpContext - Provides stable callback references to SFTP components
+ * 
+ * This context eliminates props drilling of callback functions through
+ * the component tree, significantly reducing re-renders caused by
+ * callback reference changes.
+ */
+
+import React, { createContext, useContext, useMemo, useSyncExternalStore } from "react";
+import { Host, SftpFileEntry, SftpFilenameEncoding } from "../../types";
+
+// Types for the context
+export interface SftpPaneCallbacks {
+    onConnect: (host: Host | "local") => void;
+    onDisconnect: () => void;
+    onNavigateTo: (path: string) => void;
+    onNavigateUp: () => void;
+    onRefresh: () => void;
+    onSetFilenameEncoding: (encoding: SftpFilenameEncoding) => void;
+    onOpenEntry: (entry: SftpFileEntry) => void;
+    onToggleSelection: (fileName: string, multiSelect: boolean) => void;
+    onRangeSelect: (fileNames: string[]) => void;
+    onClearSelection: () => void;
+    onSetFilter: (filter: string) => void;
+    onCreateDirectory: (name: string) => Promise<void>;
+    onCreateFile: (name: string) => Promise<void>;
+    onDeleteFiles: (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;
+    // 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
+    // External file upload (supports folders via DataTransfer)
+    onUploadExternalFiles?: (dataTransfer: DataTransfer) => Promise<void>;
+}
+
+export interface SftpDragCallbacks {
+    onDragStart: (files: { name: string; isDirectory: boolean }[], side: "left" | "right") => void;
+    onDragEnd: () => void;
+}
+
+// Store for activeTabId - allows subscription without re-rendering parent
+type ActiveTabStore = {
+    left: string | null;
+    right: string | null;
+};
+
+type ActiveTabListener = () => void;
+
+let activeTabState: ActiveTabStore = { left: null, right: null };
+const activeTabListeners = new Set<ActiveTabListener>();
+
+export const activeTabStore = {
+    getSnapshot: () => activeTabState,
+    getLeftActiveTabId: () => activeTabState.left,
+    getRightActiveTabId: () => activeTabState.right,
+    setActiveTabId: (side: "left" | "right", tabId: string | null) => {
+        if (activeTabState[side] !== tabId) {
+            activeTabState = { ...activeTabState, [side]: tabId };
+            activeTabListeners.forEach((listener) => listener());
+        }
+    },
+    subscribe: (listener: ActiveTabListener) => {
+        activeTabListeners.add(listener);
+        return () => activeTabListeners.delete(listener);
+    },
+};
+
+// Hook to subscribe to active tab changes for a specific side
+export const useActiveTabId = (side: "left" | "right"): string | null => {
+    return useSyncExternalStore(
+        activeTabStore.subscribe,
+        () => (side === "left" ? activeTabStore.getLeftActiveTabId() : activeTabStore.getRightActiveTabId()),
+        () => (side === "left" ? activeTabStore.getLeftActiveTabId() : activeTabStore.getRightActiveTabId()),
+    );
+};
+
+// Hook to check if a specific pane is active (for CSS control)
+export const useIsPaneActive = (side: "left" | "right", paneId: string): boolean => {
+    const activeTabId = useActiveTabId(side);
+    return activeTabId === paneId || (activeTabId === null && paneId !== null);
+};
+
+export interface SftpContextValue {
+    // Hosts list for connection picker
+    hosts: Host[];
+
+    // Drag state (shared between panes)
+    draggedFiles: { name: string; isDirectory: boolean; side: "left" | "right" }[] | null;
+    dragCallbacks: SftpDragCallbacks;
+
+    // Callbacks for each side
+    leftCallbacks: SftpPaneCallbacks;
+    rightCallbacks: SftpPaneCallbacks;
+
+    // Settings
+    showHiddenFiles: boolean;
+}
+
+const SftpContext = createContext<SftpContextValue | null>(null);
+
+export const useSftpContext = () => {
+    const context = useContext(SftpContext);
+    if (!context) {
+        throw new Error("useSftpContext must be used within SftpContextProvider");
+    }
+    return context;
+};
+
+// Hook to get callbacks for a specific side
+export const useSftpPaneCallbacks = (side: "left" | "right"): SftpPaneCallbacks => {
+    const context = useSftpContext();
+    return side === "left" ? context.leftCallbacks : context.rightCallbacks;
+};
+
+// Hook to get drag-related values
+export const useSftpDrag = () => {
+    const context = useSftpContext();
+    return {
+        draggedFiles: context.draggedFiles,
+        ...context.dragCallbacks,
+    };
+};
+
+// Hook to get hosts
+export const useSftpHosts = () => {
+    const context = useSftpContext();
+    return context.hosts;
+};
+
+// Hook to get showHiddenFiles setting
+export const useSftpShowHiddenFiles = (): boolean => {
+    const context = useSftpContext();
+    return context.showHiddenFiles;
+};
+
+interface SftpContextProviderProps {
+    hosts: Host[];
+    draggedFiles: { name: string; isDirectory: boolean; side: "left" | "right" }[] | null;
+    dragCallbacks: SftpDragCallbacks;
+    leftCallbacks: SftpPaneCallbacks;
+    rightCallbacks: SftpPaneCallbacks;
+    showHiddenFiles: boolean;
+    children: React.ReactNode;
+}
+
+export const SftpContextProvider: React.FC<SftpContextProviderProps> = ({
+    hosts,
+    draggedFiles,
+    dragCallbacks,
+    leftCallbacks,
+    rightCallbacks,
+    showHiddenFiles,
+    children,
+}) => {
+    // Memoize the context value to prevent unnecessary re-renders
+    // Note: The callbacks objects should be stable (created with useMemo in parent)
+    const value = useMemo<SftpContextValue>(
+        () => ({
+            hosts,
+            draggedFiles,
+            dragCallbacks,
+            leftCallbacks,
+            rightCallbacks,
+            showHiddenFiles,
+        }),
+        [hosts, draggedFiles, dragCallbacks, leftCallbacks, rightCallbacks, showHiddenFiles],
+    );
+
+    return <SftpContext.Provider value={value}>{children}</SftpContext.Provider>;
+};

components/sftp/SftpFileRow.tsx

@@ -3,27 +3,29 @@
  */
 
 import { Folder, Link } from 'lucide-react';
-import React,{ memo } from '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 { ColumnWidths, formatBytes, formatDate, getFileIcon, isNavigableDirectory } from './utils';
 
 interface SftpFileRowProps {
     entry: SftpFileEntry;
+    index: number;
     isSelected: boolean;
     isDragOver: boolean;
     columnWidths: ColumnWidths;
-    onSelect: (e: React.MouseEvent) => void;
-    onOpen: () => void;
-    onDragStart: (e: React.DragEvent) => void;
+    onSelect: (entry: SftpFileEntry, index: number, e: React.MouseEvent) => void;
+    onOpen: (entry: SftpFileEntry) => void;
+    onDragStart: (entry: SftpFileEntry, e: React.DragEvent) => void;
     onDragEnd: () => void;
-    onDragOver: (e: React.DragEvent) => void;
+    onDragOver: (entry: SftpFileEntry, e: React.DragEvent) => void;
     onDragLeave: () => void;
-    onDrop: (e: React.DragEvent) => void;
+    onDrop: (entry: SftpFileEntry, e: React.DragEvent) => void;
 }
 
 const SftpFileRowInner: React.FC<SftpFileRowProps> = ({
     entry,
+    index,
     isSelected,
     isDragOver,
     columnWidths,
@@ -39,17 +41,36 @@ const SftpFileRowInner: React.FC<SftpFileRowProps> = ({
     // A symlink pointing to a directory behaves like a directory (navigable, accepts drops)
     const isNavDir = isNavigableDirectory(entry);
     const isSymlinkToDirectory = entry.type === 'symlink' && entry.linkTarget === 'directory';
+    const modifiedLabel = entry.lastModifiedFormatted || formatDate(entry.lastModified);
+    const sizeLabel = entry.sizeFormatted || formatBytes(entry.size);
+    const handleSelect = useCallback((e: React.MouseEvent) => {
+        onSelect(entry, index, e);
+    }, [entry, index, onSelect]);
+    const handleOpen = useCallback(() => {
+        console.log("[SftpFileRow] handleOpen called", { entryName: entry.name, entryType: entry.type });
+        onOpen(entry);
+    }, [entry, onOpen]);
+    const handleDragStart = useCallback((e: React.DragEvent) => {
+        onDragStart(entry, e);
+    }, [entry, onDragStart]);
+    const handleDragOver = useCallback((e: React.DragEvent) => {
+        onDragOver(entry, e);
+    }, [entry, onDragOver]);
+    const handleDrop = useCallback((e: React.DragEvent) => {
+        onDrop(entry, e);
+    }, [entry, onDrop]);
 
     return (
         <div
+            data-sftp-row="true"
             draggable={!isParentDir}
-            onDragStart={onDragStart}
+            onDragStart={handleDragStart}
             onDragEnd={onDragEnd}
-            onDragOver={onDragOver}
+            onDragOver={handleDragOver}
             onDragLeave={onDragLeave}
-            onDrop={onDrop}
-            onClick={onSelect}
-            onDoubleClick={onOpen}
+            onDrop={handleDrop}
+            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",
@@ -68,14 +89,14 @@ const SftpFileRowInner: React.FC<SftpFileRowProps> = ({
                         <Link size={8} className="absolute -bottom-0.5 -right-0.5 text-muted-foreground" aria-hidden="true" />
                     )}
                 </div>
-                <span className={cn("truncate", entry.type === 'symlink' && "italic")}>
+                <span className={cn("truncate", entry.type === 'symlink' && "italic pr-1")}>
                     {entry.name}
                     {entry.type === 'symlink' && <span className="sr-only"> (symbolic link)</span>}
                 </span>
             </div>
-            <span className="text-xs text-muted-foreground truncate">{formatDate(entry.lastModified)}</span>
+            <span className="text-xs text-muted-foreground truncate">{modifiedLabel}</span>
             <span className="text-xs text-muted-foreground truncate text-right">
-                {isNavDir ? '--' : formatBytes(entry.size)}
+                {isNavDir ? '--' : sizeLabel}
             </span>
             <span className="text-xs text-muted-foreground truncate capitalize text-right">
                 {isSymlinkToDirectory ? 'link → folder' : entry.type === 'directory' ? 'folder' : entry.type === 'symlink' ? 'link' : entry.name.split('.').pop()?.toLowerCase() || 'file'}
@@ -84,5 +105,29 @@ const SftpFileRowInner: React.FC<SftpFileRowProps> = ({
     );
 };
 
-export const SftpFileRow = memo(SftpFileRowInner);
+const areEqual = (prev: SftpFileRowProps, next: SftpFileRowProps): boolean => {
+    if (prev.index !== next.index) return false;
+    if (prev.isSelected !== next.isSelected) 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;
+    if (prev.columnWidths.size !== next.columnWidths.size) return false;
+    if (prev.columnWidths.type !== next.columnWidths.type) return false;
+    // Compare callbacks - important for ".." entry which has static properties
+    if (prev.onOpen !== next.onOpen) return false;
+    if (prev.onSelect !== next.onSelect) return false;
+    const prevEntry = prev.entry;
+    const nextEntry = next.entry;
+    return (
+        prevEntry.name === nextEntry.name &&
+        prevEntry.type === nextEntry.type &&
+        prevEntry.size === nextEntry.size &&
+        prevEntry.lastModified === nextEntry.lastModified &&
+        prevEntry.linkTarget === nextEntry.linkTarget &&
+        prevEntry.sizeFormatted === nextEntry.sizeFormatted &&
+        prevEntry.lastModifiedFormatted === nextEntry.lastModifiedFormatted
+    );
+};
+
+export const SftpFileRow = memo(SftpFileRowInner, areEqual);
 SftpFileRow.displayName = 'SftpFileRow';

components/sftp/SftpHostPicker.tsx

@@ -3,7 +3,7 @@
  */
 
 import { Monitor, Search } from 'lucide-react';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { useI18n } from '../../application/i18n/I18nProvider';
 import { Host } from '../../types';
 import { DistroAvatar } from '../DistroAvatar';
@@ -22,7 +22,7 @@ interface SftpHostPickerProps {
     onSelectHost: (host: Host) => void;
 }
 
-export const SftpHostPicker: React.FC<SftpHostPickerProps> = ({
+const SftpHostPickerInner: React.FC<SftpHostPickerProps> = ({
     open,
     onOpenChange,
     hosts,
@@ -38,9 +38,11 @@ export const SftpHostPicker: React.FC<SftpHostPickerProps> = ({
     const filteredHosts = useMemo(() => {
         const term = hostSearch.trim().toLowerCase();
         return hosts.filter(h =>
-            !term ||
+            // Filter out serial hosts - SFTP is not supported for serial connections
+            h.protocol !== "serial" &&
+            (!term ||
             h.label.toLowerCase().includes(term) ||
-            h.hostname.toLowerCase().includes(term)
+            h.hostname.toLowerCase().includes(term))
         ).sort((a, b) => a.label.localeCompare(b.label));
     }, [hosts, hostSearch]);
     const sideLabel = side === 'left' ? t('common.left') : t('common.right');
@@ -178,3 +180,6 @@ export const SftpHostPicker: React.FC<SftpHostPickerProps> = ({
         </Dialog>
     );
 };
+
+export const SftpHostPicker = memo(SftpHostPickerInner);
+SftpHostPicker.displayName = 'SftpHostPicker';

components/sftp/SftpOverlays.tsx

@@ -0,0 +1,196 @@
+import React from "react";
+import type { Host, SftpFileEntry } from "../../types";
+import type { FileOpenerType, SystemAppInfo } from "../../lib/sftpFileUtils";
+import type { useSftpState } from "../../application/state/useSftpState";
+import { Button } from "../ui/button";
+import FileOpenerDialog from "../FileOpenerDialog";
+import TextEditorModal from "../TextEditorModal";
+import { SftpConflictDialog, SftpHostPicker, SftpPermissionsDialog, SftpTransferItem } from "./index";
+
+type SftpState = ReturnType<typeof useSftpState>;
+
+interface SftpOverlaysProps {
+  hosts: Host[];
+  sftp: SftpState;
+  visibleTransfers: SftpState["transfers"];
+  showHostPickerLeft: boolean;
+  showHostPickerRight: boolean;
+  hostSearchLeft: string;
+  hostSearchRight: string;
+  setShowHostPickerLeft: (open: boolean) => void;
+  setShowHostPickerRight: (open: boolean) => void;
+  setHostSearchLeft: (value: string) => void;
+  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;
+  showTextEditor: boolean;
+  setShowTextEditor: (open: boolean) => void;
+  textEditorTarget: { file: SftpFileEntry; side: "left" | "right"; fullPath: string } | null;
+  setTextEditorTarget: (target: { file: SftpFileEntry; side: "left" | "right"; fullPath: string } | null) => void;
+  textEditorContent: string;
+  setTextEditorContent: (content: string) => void;
+  handleSaveTextFile: (content: string) => Promise<void>;
+  showFileOpenerDialog: boolean;
+  setShowFileOpenerDialog: (open: boolean) => void;
+  fileOpenerTarget: { file: SftpFileEntry; side: "left" | "right"; fullPath: string } | null;
+  setFileOpenerTarget: (target: { file: SftpFileEntry; side: "left" | "right"; fullPath: string } | null) => void;
+  handleFileOpenerSelect: (openerType: FileOpenerType, setAsDefault: boolean, systemApp?: SystemAppInfo) => void;
+  handleSelectSystemApp: (systemApp: { path: string; name: string }) => void;
+}
+
+export const SftpOverlays: React.FC<SftpOverlaysProps> = ({
+  hosts,
+  sftp,
+  visibleTransfers,
+  showHostPickerLeft,
+  showHostPickerRight,
+  hostSearchLeft,
+  hostSearchRight,
+  setShowHostPickerLeft,
+  setShowHostPickerRight,
+  setHostSearchLeft,
+  setHostSearchRight,
+  handleHostSelectLeft,
+  handleHostSelectRight,
+  permissionsState,
+  setPermissionsState,
+  showTextEditor,
+  setShowTextEditor,
+  textEditorTarget,
+  setTextEditorTarget,
+  textEditorContent,
+  setTextEditorContent,
+  handleSaveTextFile,
+  showFileOpenerDialog,
+  setShowFileOpenerDialog,
+  fileOpenerTarget,
+  setFileOpenerTarget,
+  handleFileOpenerSelect,
+  handleSelectSystemApp,
+}) => {
+  return (
+    <>
+      {/* Host pickers for adding new tabs */}
+      <SftpHostPicker
+        open={showHostPickerLeft}
+        onOpenChange={setShowHostPickerLeft}
+        hosts={hosts}
+        side="left"
+        hostSearch={hostSearchLeft}
+        onHostSearchChange={setHostSearchLeft}
+        onSelectLocal={() => handleHostSelectLeft("local")}
+        onSelectHost={handleHostSelectLeft}
+      />
+      <SftpHostPicker
+        open={showHostPickerRight}
+        onOpenChange={setShowHostPickerRight}
+        hosts={hosts}
+        side="right"
+        hostSearch={hostSearchRight}
+        onHostSearchChange={setHostSearchRight}
+        onSelectLocal={() => handleHostSelectRight("local")}
+        onSelectHost={handleHostSelectRight}
+      />
+
+      {/* Transfer status area - shows folder uploads and file transfers */}
+      {sftp.transfers.length > 0 && (
+        <div className="border-t border-border/70 bg-secondary/80 backdrop-blur-sm shrink-0">
+          <div className="flex items-center justify-between px-4 py-2 text-xs text-muted-foreground border-b border-border/40">
+            <span className="font-medium">
+              Transfers
+              {sftp.activeTransfersCount > 0 && (
+                <span className="ml-2 text-primary">
+                  ({sftp.activeTransfersCount} active)
+                </span>
+              )}
+            </span>
+            {sftp.transfers.some(
+              (t) => t.status === "completed" || t.status === "cancelled",
+            ) && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 px-2 text-xs"
+                  onClick={sftp.clearCompletedTransfers}
+                >
+                  Clear completed
+                </Button>
+              )}
+          </div>
+          <div className="max-h-40 overflow-auto">
+            {visibleTransfers.map((task) => (
+              <SftpTransferItem
+                key={task.id}
+                task={task}
+                onCancel={() => {
+                  // External uploads use a different cancel mechanism
+                  if (task.sourceConnectionId === "external") {
+                    sftp.cancelExternalUpload();
+                  }
+                  sftp.cancelTransfer(task.id);
+                }}
+                onRetry={() => sftp.retryTransfer(task.id)}
+                onDismiss={() => sftp.dismissTransfer(task.id)}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      <SftpConflictDialog
+        conflicts={sftp.conflicts}
+        onResolve={sftp.resolveConflict}
+        formatFileSize={sftp.formatFileSize}
+      />
+
+      <SftpPermissionsDialog
+        open={!!permissionsState}
+        onOpenChange={(open) => !open && setPermissionsState(null)}
+        file={permissionsState?.file ?? null}
+        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,
+              permissions,
+            );
+          }
+          setPermissionsState(null);
+        }}
+      />
+
+      {/* Text Editor Modal */}
+      <TextEditorModal
+        open={showTextEditor}
+        onClose={() => {
+          setShowTextEditor(false);
+          setTextEditorTarget(null);
+          setTextEditorContent("");
+        }}
+        fileName={textEditorTarget?.file.name || ""}
+        initialContent={textEditorContent}
+        onSave={handleSaveTextFile}
+      />
+
+      {/* File Opener Dialog */}
+      <FileOpenerDialog
+        open={showFileOpenerDialog}
+        onClose={() => {
+          setShowFileOpenerDialog(false);
+          setFileOpenerTarget(null);
+        }}
+        fileName={fileOpenerTarget?.file.name || ""}
+        onSelect={handleFileOpenerSelect}
+        onSelectSystemApp={handleSelectSystemApp}
+      />
+    </>
+  );
+};

components/sftp/SftpPaneDialogs.tsx

@@ -0,0 +1,313 @@
+import React from "react";
+import { Loader2, Trash2 } from "lucide-react";
+import { Button } from "../ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import { SftpHostPicker } from "./index";
+import type { Host } from "../../types";
+
+interface SftpPaneDialogsProps {
+  t: (key: string, params?: Record<string, unknown>) => string;
+  // New folder
+  showNewFolderDialog: boolean;
+  setShowNewFolderDialog: (open: boolean) => void;
+  newFolderName: string;
+  setNewFolderName: (value: string) => void;
+  handleCreateFolder: () => void;
+  isCreating: boolean;
+  // New file
+  showNewFileDialog: boolean;
+  setShowNewFileDialog: (open: boolean) => void;
+  newFileName: string;
+  setNewFileName: (value: string) => void;
+  fileNameError: string | null;
+  setFileNameError: (value: string | null) => void;
+  handleCreateFile: () => void;
+  isCreatingFile: boolean;
+  // Overwrite confirm
+  showOverwriteConfirm: boolean;
+  setShowOverwriteConfirm: (open: boolean) => void;
+  overwriteTarget: string | null;
+  handleOverwriteConfirm: () => void;
+  // Rename
+  showRenameDialog: boolean;
+  setShowRenameDialog: (open: boolean) => void;
+  renameName: string;
+  setRenameName: (value: string) => void;
+  handleRename: () => void;
+  isRenaming: boolean;
+  // Delete
+  showDeleteConfirm: boolean;
+  setShowDeleteConfirm: (open: boolean) => void;
+  deleteTargets: string[];
+  handleDelete: () => void;
+  isDeleting: boolean;
+  // Host picker (connected view)
+  showHostPicker: boolean;
+  setShowHostPicker: (open: boolean) => void;
+  hosts: Host[];
+  side: "left" | "right";
+  hostSearch: string;
+  setHostSearch: (value: string) => void;
+  onConnect: (host: Host | "local") => void;
+  onDisconnect: () => void;
+}
+
+export const SftpPaneDialogs: React.FC<SftpPaneDialogsProps> = ({
+  t,
+  showNewFolderDialog,
+  setShowNewFolderDialog,
+  newFolderName,
+  setNewFolderName,
+  handleCreateFolder,
+  isCreating,
+  showNewFileDialog,
+  setShowNewFileDialog,
+  newFileName,
+  setNewFileName,
+  fileNameError,
+  setFileNameError,
+  handleCreateFile,
+  isCreatingFile,
+  showOverwriteConfirm,
+  setShowOverwriteConfirm,
+  overwriteTarget,
+  handleOverwriteConfirm,
+  showRenameDialog,
+  setShowRenameDialog,
+  renameName,
+  setRenameName,
+  handleRename,
+  isRenaming,
+  showDeleteConfirm,
+  setShowDeleteConfirm,
+  deleteTargets,
+  handleDelete,
+  isDeleting,
+  showHostPicker,
+  setShowHostPicker,
+  hosts,
+  side,
+  hostSearch,
+  setHostSearch,
+  onConnect,
+  onDisconnect,
+}) => (
+  <>
+    {/* Dialogs */}
+    <Dialog open={showNewFolderDialog} onOpenChange={setShowNewFolderDialog}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{t("sftp.newFolder")}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label>{t("sftp.folderName")}</Label>
+            <Input
+              value={newFolderName}
+              onChange={(e) => setNewFolderName(e.target.value)}
+              placeholder={t("sftp.folderName.placeholder")}
+              onKeyDown={(e) => e.key === "Enter" && handleCreateFolder()}
+              autoFocus
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => setShowNewFolderDialog(false)}
+          >
+            {t("common.cancel")}
+          </Button>
+          <Button
+            onClick={handleCreateFolder}
+            disabled={!newFolderName.trim() || isCreating}
+          >
+            {isCreating && (
+              <Loader2 size={14} className="mr-2 animate-spin" />
+            )}
+            {t("common.create")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+    <Dialog open={showNewFileDialog} onOpenChange={(open) => {
+      setShowNewFileDialog(open);
+      if (!open) {
+        setFileNameError(null);
+      }
+    }}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{t("sftp.newFile")}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label>{t("sftp.fileName")}</Label>
+            <Input
+              value={newFileName}
+              onChange={(e) => {
+                setNewFileName(e.target.value);
+                setFileNameError(null);
+              }}
+              placeholder={t("sftp.fileName.placeholder")}
+              onKeyDown={(e) => e.key === "Enter" && handleCreateFile()}
+              autoFocus
+            />
+            {fileNameError && (
+              <div className="text-xs text-destructive">{fileNameError}</div>
+            )}
+          </div>
+        </div>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => setShowNewFileDialog(false)}
+          >
+            {t("common.cancel")}
+          </Button>
+          <Button
+            onClick={handleCreateFile}
+            disabled={!newFileName.trim() || isCreatingFile}
+          >
+            {isCreatingFile && (
+              <Loader2 size={14} className="mr-2 animate-spin" />
+            )}
+            {t("common.create")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+    {/* Overwrite Confirmation Dialog */}
+    <Dialog open={showOverwriteConfirm} onOpenChange={setShowOverwriteConfirm}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{t("sftp.overwrite.title")}</DialogTitle>
+          <DialogDescription>
+            {t("sftp.overwrite.desc", { name: overwriteTarget || "" })}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => setShowOverwriteConfirm(false)}
+          >
+            {t("common.cancel")}
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={handleOverwriteConfirm}
+          >
+            {t("sftp.overwrite.confirm")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+    <Dialog open={showRenameDialog} onOpenChange={setShowRenameDialog}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{t("sftp.rename.title")}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label>{t("sftp.rename.newName")}</Label>
+            <Input
+              value={renameName}
+              onChange={(e) => setRenameName(e.target.value)}
+              placeholder={t("sftp.rename.placeholder")}
+              onKeyDown={(e) => e.key === "Enter" && handleRename()}
+              autoFocus
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => setShowRenameDialog(false)}
+          >
+            {t("common.cancel")}
+          </Button>
+          <Button
+            onClick={handleRename}
+            disabled={!renameName.trim() || isRenaming}
+          >
+            {isRenaming && (
+              <Loader2 size={14} className="mr-2 animate-spin" />
+            )}
+            {t("common.rename")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+    <Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle>
+            {t("sftp.deleteConfirm.title", { count: deleteTargets.length })}
+          </DialogTitle>
+          <DialogDescription>
+            {t("sftp.deleteConfirm.desc")}
+          </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>
+          ))}
+        </div>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => setShowDeleteConfirm(false)}
+          >
+            {t("common.cancel")}
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={handleDelete}
+            disabled={isDeleting}
+          >
+            {isDeleting && (
+              <Loader2 size={14} className="mr-2 animate-spin" />
+            )}
+            {t("action.delete")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+    <SftpHostPicker
+      open={showHostPicker}
+      onOpenChange={setShowHostPicker}
+      hosts={hosts}
+      side={side}
+      hostSearch={hostSearch}
+      onHostSearchChange={setHostSearch}
+      onSelectLocal={() => {
+        onDisconnect();
+        onConnect("local");
+      }}
+      onSelectHost={(host) => {
+        onDisconnect();
+        onConnect(host);
+      }}
+    />
+  </>
+);

components/sftp/SftpPaneEmptyState.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { HardDrive, Monitor, Plus } from "lucide-react";
+import { Button } from "../ui/button";
+import { SftpHostPicker } from "./SftpHostPicker";
+import type { Host } from "../../domain/models";
+
+interface SftpPaneEmptyStateProps {
+  side: "left" | "right";
+  showEmptyHeader: boolean;
+  t: (key: string, params?: Record<string, unknown>) => string;
+  showHostPicker: boolean;
+  setShowHostPicker: (open: boolean) => void;
+  hostSearch: string;
+  setHostSearch: (value: string) => void;
+  hosts: Host[];
+  onConnect: (hostId: string) => void;
+}
+
+export const SftpPaneEmptyState: React.FC<SftpPaneEmptyStateProps> = ({
+  side,
+  showEmptyHeader,
+  t,
+  showHostPicker,
+  setShowHostPicker,
+  hostSearch,
+  setHostSearch,
+  hosts,
+  onConnect,
+}) => {
+  return (
+    <div className="absolute inset-0 flex flex-col">
+      {showEmptyHeader && (
+        <div className="h-12 px-4 border-b border-border/60 flex items-center gap-3 shrink-0">
+          <div className="flex items-center gap-2 text-sm font-semibold text-muted-foreground">
+            {side === "left" ? <Monitor size={14} /> : <HardDrive size={14} />}
+            <span>
+              {side === "left" ? t("sftp.pane.local") : t("sftp.pane.remote")}
+            </span>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8 px-3"
+            onClick={() => setShowHostPicker(true)}
+          >
+            <Plus size={14} className="mr-2" /> {t("sftp.pane.selectHost")}
+          </Button>
+        </div>
+      )}
+
+      <div className="flex-1 flex flex-col items-center justify-center text-center gap-4 p-6">
+        <div className="h-14 w-14 rounded-xl bg-secondary/60 text-primary flex items-center justify-center">
+          {side === "left" ? <Monitor size={24} /> : <HardDrive size={24} />}
+        </div>
+        <div>
+          <div className="text-sm font-semibold mb-1">
+            {t("sftp.pane.selectHostToStart")}
+          </div>
+          <div className="text-xs text-muted-foreground">
+            {t("sftp.pane.chooseFilesystem")}
+          </div>
+        </div>
+        <Button onClick={() => setShowHostPicker(true)}>
+          <Plus size={14} className="mr-2" /> {t("sftp.pane.selectHost")}
+        </Button>
+      </div>
+
+      <SftpHostPicker
+        open={showHostPicker}
+        onOpenChange={setShowHostPicker}
+        hosts={hosts}
+        side={side}
+        hostSearch={hostSearch}
+        onHostSearchChange={setHostSearch}
+        onSelectLocal={() => onConnect("local")}
+        onSelectHost={onConnect}
+      />
+    </div>
+  );
+};

components/sftp/SftpPaneFileList.tsx

@@ -0,0 +1,433 @@
+import React, { useCallback, useMemo } from "react";
+import { AlertCircle, ArrowDown, Copy, Download, Edit2, ExternalLink, FilePlus, Folder, FolderPlus, Loader2, Pencil, RefreshCw, Shield, Trash2 } from "lucide-react";
+import { Button } from "../ui/button";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "../ui/context-menu";
+import { cn } from "../../lib/utils";
+import type { SftpFileEntry } from "../../types";
+import type { SftpPane } from "../../application/state/sftp/types";
+import type { ColumnWidths, SortField, SortOrder } from "./utils";
+import { isNavigableDirectory } from "./index";
+import { isKnownBinaryFile } from "../../lib/sftpFileUtils";
+import { SftpFileRow } from "./index";
+
+interface SftpPaneFileListProps {
+  t: (key: string, params?: Record<string, unknown>) => string;
+  pane: SftpPane;
+  side: "left" | "right";
+  columnWidths: ColumnWidths;
+  sortField: SortField;
+  sortOrder: SortOrder;
+  handleSort: (field: SortField) => void;
+  handleResizeStart: (field: keyof ColumnWidths, e: React.MouseEvent) => void;
+  fileListRef: React.RefObject<HTMLDivElement>;
+  handleFileListScroll: (e: React.UIEvent<HTMLDivElement>) => void;
+  shouldVirtualize: boolean;
+  totalHeight: number;
+  sortedDisplayFiles: SftpFileEntry[];
+  isDragOverPane: boolean;
+  draggedFiles: { name: string; isDirectory: boolean; side: "left" | "right" }[] | null;
+  onRefresh: () => void;
+  setShowNewFolderDialog: (open: boolean) => void;
+  setShowNewFileDialog: (open: boolean) => void;
+  getNextUntitledName: (existingNames: string[]) => string;
+  setNewFileName: (value: string) => void;
+  setFileNameError: (value: string | null) => void;
+  // Row rendering
+  dragOverEntry: string | null;
+  handleRowSelect: (entry: SftpFileEntry, index: number, e: React.MouseEvent) => void;
+  handleRowOpen: (entry: SftpFileEntry) => void;
+  handleFileDragStart: (entry: SftpFileEntry, e: React.DragEvent) => void;
+  onDragEnd: () => void;
+  handleEntryDragOver: (entry: SftpFileEntry, e: React.DragEvent) => void;
+  handleRowDragLeave: () => void;
+  handleEntryDrop: (entry: SftpFileEntry, e: React.DragEvent) => void;
+  onCopyToOtherPane: (files: { name: string; isDirectory: boolean }[]) => void;
+  onOpenFileWith?: (entry: SftpFileEntry) => void;
+  onEditFile?: (entry: SftpFileEntry) => void;
+  onDownloadFile?: (entry: SftpFileEntry) => void;
+  onEditPermissions?: (entry: SftpFileEntry) => void;
+  openRenameDialog: (name: string) => void;
+  openDeleteConfirm: (targets: string[]) => void;
+  rowHeight: number;
+  visibleRows: { entry: SftpFileEntry; index: number; top: number }[];
+}
+
+export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
+  t,
+  pane,
+  side,
+  columnWidths,
+  sortField,
+  sortOrder,
+  handleSort,
+  handleResizeStart,
+  fileListRef,
+  handleFileListScroll,
+  shouldVirtualize,
+  totalHeight,
+  sortedDisplayFiles,
+  isDragOverPane,
+  draggedFiles,
+  onRefresh,
+  setShowNewFolderDialog,
+  setShowNewFileDialog,
+  getNextUntitledName,
+  setNewFileName,
+  setFileNameError,
+  dragOverEntry,
+  handleRowSelect,
+  handleRowOpen,
+  handleFileDragStart,
+  onDragEnd,
+  handleEntryDragOver,
+  handleRowDragLeave,
+  handleEntryDrop,
+  onCopyToOtherPane,
+  onOpenFileWith,
+  onEditFile,
+  onDownloadFile,
+  onEditPermissions,
+  openRenameDialog,
+  openDeleteConfirm,
+  rowHeight,
+  visibleRows,
+}) => {
+  const filesByName = useMemo(() => {
+    const map = new Map<string, SftpFileEntry>();
+    sortedDisplayFiles.forEach((entry) => {
+      map.set(entry.name, entry);
+    });
+    return map;
+  }, [sortedDisplayFiles]);
+
+  const renderRow = useCallback(
+    (entry: SftpFileEntry, index: number) => (
+      <ContextMenu>
+        <ContextMenuTrigger>
+          <SftpFileRow
+            entry={entry}
+            index={index}
+            isSelected={pane.selectedFiles.has(entry.name)}
+            isDragOver={dragOverEntry === entry.name}
+            columnWidths={columnWidths}
+            onSelect={handleRowSelect}
+            onOpen={handleRowOpen}
+            onDragStart={handleFileDragStart}
+            onDragEnd={onDragEnd}
+            onDragOver={handleEntryDragOver}
+            onDragLeave={handleRowDragLeave}
+            onDrop={handleEntryDrop}
+          />
+        </ContextMenuTrigger>
+        {entry.name !== ".." && (
+          <ContextMenuContent>
+            <ContextMenuItem onClick={() => handleRowOpen(entry)}>
+              {isNavigableDirectory(entry) ? (
+                <>
+                  <Folder size={14} className="mr-2" /> {t("sftp.context.open")}
+                </>
+              ) : (
+                <>
+                  <ExternalLink size={14} className="mr-2" />{" "}
+                  {t("sftp.context.open")}
+                </>
+              )}
+            </ContextMenuItem>
+            {!isNavigableDirectory(entry) && onOpenFileWith && (
+              <ContextMenuItem onClick={() => onOpenFileWith(entry)}>
+                <ExternalLink size={14} className="mr-2" />{" "}
+                {t("sftp.context.openWith")}
+              </ContextMenuItem>
+            )}
+            {!isNavigableDirectory(entry) && !isKnownBinaryFile(entry.name) && onEditFile && (
+              <ContextMenuItem onClick={() => onEditFile(entry)}>
+                <Edit2 size={14} className="mr-2" />{" "}
+                {t("sftp.context.edit")}
+              </ContextMenuItem>
+            )}
+            {!isNavigableDirectory(entry) && onDownloadFile && (
+              <ContextMenuItem onClick={() => onDownloadFile(entry)}>
+                <Download size={14} className="mr-2" />{" "}
+                {t("sftp.context.download")}
+              </ContextMenuItem>
+            )}
+            <ContextMenuSeparator />
+            <ContextMenuItem
+              onClick={() => {
+                const files = pane.selectedFiles.has(entry.name)
+                  ? Array.from(pane.selectedFiles)
+                  : [entry.name];
+                const fileData = files.map((name) => {
+                  const fileName = String(name);
+                  const file = filesByName.get(fileName);
+                  return {
+                    name: fileName,
+                    isDirectory: file ? isNavigableDirectory(file) : false,
+                  };
+                });
+                onCopyToOtherPane(fileData);
+              }}
+            >
+              <Copy size={14} className="mr-2" />{" "}
+              {t("sftp.context.copyToOtherPane")}
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem onClick={() => openRenameDialog(entry.name)}>
+              <Pencil size={14} className="mr-2" /> {t("common.rename")}
+            </ContextMenuItem>
+            {onEditPermissions && pane.connection && !pane.connection.isLocal && (
+              <ContextMenuItem onClick={() => onEditPermissions(entry)}>
+                <Shield size={14} className="mr-2" />{" "}
+                {t("sftp.context.permissions")}
+              </ContextMenuItem>
+            )}
+            <ContextMenuItem
+              className="text-destructive"
+              onClick={() => {
+                const files = pane.selectedFiles.has(entry.name)
+                  ? Array.from(pane.selectedFiles)
+                  : [entry.name];
+                openDeleteConfirm(files);
+              }}
+            >
+              <Trash2 size={14} className="mr-2" /> {t("action.delete")}
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem onClick={onRefresh}>
+              <RefreshCw size={14} className="mr-2" /> {t("common.refresh")}
+            </ContextMenuItem>
+            <ContextMenuItem onClick={() => setShowNewFolderDialog(true)}>
+              <FolderPlus size={14} className="mr-2" /> {t("sftp.newFolder")}
+            </ContextMenuItem>
+            <ContextMenuItem onClick={() => setShowNewFileDialog(true)}>
+              <FilePlus size={14} className="mr-2" /> {t("sftp.newFile")}
+            </ContextMenuItem>
+          </ContextMenuContent>
+        )}
+      </ContextMenu>
+    ),
+    [
+      columnWidths,
+      dragOverEntry,
+      filesByName,
+      handleEntryDragOver,
+      handleEntryDrop,
+      handleFileDragStart,
+      handleRowDragLeave,
+      handleRowOpen,
+      handleRowSelect,
+      onCopyToOtherPane,
+      onDownloadFile,
+      onDragEnd,
+      onEditFile,
+      onEditPermissions,
+      onOpenFileWith,
+      onRefresh,
+      openDeleteConfirm,
+      openRenameDialog,
+      pane.connection,
+      pane.selectedFiles,
+      setShowNewFolderDialog,
+      setShowNewFileDialog,
+      t,
+    ],
+  );
+
+  const fileRows = useMemo(
+    () =>
+      shouldVirtualize
+        ? visibleRows.map(({ entry, index, top }) => (
+          <div
+            key={entry.name}
+            className="absolute left-0 right-0 border-b border-border/30"
+            style={{ top, height: rowHeight }}
+          >
+            {renderRow(entry, index)}
+          </div>
+        ))
+        : sortedDisplayFiles.map((entry, index) => (
+          <React.Fragment key={entry.name}>
+            {renderRow(entry, index)}
+          </React.Fragment>
+        )),
+    [renderRow, rowHeight, shouldVirtualize, sortedDisplayFiles, visibleRows],
+  );
+
+  return (
+    <>
+      {/* File list header */}
+    <div
+      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}%`,
+      }}
+    >
+      <div
+        className="flex items-center gap-1 cursor-pointer hover:text-foreground relative pr-2"
+        onClick={() => handleSort("name")}
+      >
+        <span>{t("sftp.columns.name")}</span>
+        {sortField === "name" && (
+          <span className="text-primary">
+            {sortOrder === "asc" ? "↑" : "↓"}
+          </span>
+        )}
+        <div
+          className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/50 transition-colors"
+          onMouseDown={(e) => handleResizeStart("name", e)}
+        />
+      </div>
+      <div
+        className="flex items-center gap-1 cursor-pointer hover:text-foreground relative pr-2"
+        onClick={() => handleSort("modified")}
+      >
+        <span>{t("sftp.columns.modified")}</span>
+        {sortField === "modified" && (
+          <span className="text-primary">
+            {sortOrder === "asc" ? "↑" : "↓"}
+          </span>
+        )}
+        <div
+          className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/50 transition-colors"
+          onMouseDown={(e) => handleResizeStart("modified", e)}
+        />
+      </div>
+      <div
+        className="flex items-center gap-1 cursor-pointer hover:text-foreground relative pr-2 justify-end"
+        onClick={() => handleSort("size")}
+      >
+        {sortField === "size" && (
+          <span className="text-primary">
+            {sortOrder === "asc" ? "↑" : "↓"}
+          </span>
+        )}
+        <span>{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"
+        onClick={() => handleSort("type")}
+      >
+        {sortField === "type" && (
+          <span className="text-primary">
+            {sortOrder === "asc" ? "↑" : "↓"}
+          </span>
+        )}
+        <span>{t("sftp.columns.kind")}</span>
+      </div>
+    </div>
+
+    {/* File list with empty area context menu */}
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <div
+          ref={fileListRef}
+          className={cn(
+            "flex-1 min-h-0 overflow-y-auto relative",
+            isDragOverPane && "ring-2 ring-primary/30 ring-inset",
+          )}
+          onScroll={handleFileListScroll}
+        >
+          {pane.loading && sortedDisplayFiles.length === 0 ? (
+            <div className="flex items-center justify-center h-full">
+              <Loader2 size={24} className="animate-spin text-muted-foreground" />
+            </div>
+          ) : pane.error && !pane.reconnecting ? (
+            <div className="flex flex-col items-center justify-center h-full gap-2 text-destructive">
+              <AlertCircle size={24} />
+              <span className="text-sm">{t(pane.error)}</span>
+              <Button variant="outline" size="sm" onClick={onRefresh}>
+                {t("sftp.retry")}
+              </Button>
+            </div>
+          ) : sortedDisplayFiles.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
+              <Folder size={32} className="mb-2 opacity-50" />
+              <span className="text-sm">{t("sftp.emptyDirectory")}</span>
+            </div>
+          ) : (
+            <div
+              className={cn(
+                shouldVirtualize ? "relative" : "divide-y divide-border/30",
+              )}
+              style={shouldVirtualize ? { height: totalHeight } : undefined}
+            >
+              {fileRows}
+            </div>
+          )}
+
+          {/* Drop overlay */}
+          {isDragOverPane && draggedFiles && draggedFiles[0]?.side !== side && (
+            <div className="absolute inset-0 flex items-center justify-center bg-primary/5 pointer-events-none">
+              <div className="flex flex-col items-center gap-2 text-primary">
+                <ArrowDown size={32} />
+                <span className="text-sm font-medium">{t("sftp.dropFilesHere")}</span>
+              </div>
+            </div>
+          )}
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem onClick={onRefresh}>
+          <RefreshCw size={14} className="mr-2" />{t("sftp.context.refresh")}
+        </ContextMenuItem>
+        <ContextMenuItem onClick={() => setShowNewFolderDialog(true)}>
+          <FolderPlus size={14} className="mr-2" />{t("sftp.newFolder")}
+        </ContextMenuItem>
+        <ContextMenuItem onClick={() => {
+          const defaultName = getNextUntitledName(pane.files.map(f => f.name));
+          setNewFileName(defaultName);
+          setFileNameError(null);
+          setShowNewFileDialog(true);
+        }}>
+          <FilePlus size={14} className="mr-2" />{t("sftp.newFile")}
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+
+    {/* Footer */}
+    <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,
+        })}
+        {pane.selectedFiles.size > 0 &&
+          ` - ${t("sftp.selectedCount", { count: pane.selectedFiles.size })}`}
+      </span>
+      <span className="truncate max-w-[200px]">
+        {pane.connection.currentPath}
+      </span>
+    </div>
+
+    {/* Loading overlay - covers entire pane when navigating directories */}
+    {pane.loading && sortedDisplayFiles.length > 0 && !pane.reconnecting && (
+      <div className="absolute inset-0 flex items-center justify-center bg-background/40 backdrop-blur-[1px] pointer-events-none z-10">
+        <Loader2 size={24} className="animate-spin text-muted-foreground" />
+      </div>
+    )}
+
+    {/* Reconnecting overlay - shows when SFTP connection is lost and reconnecting */}
+    {pane.reconnecting && (
+      <div className="absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-20">
+        <div className="flex flex-col items-center gap-3 p-6 rounded-xl bg-secondary/90 border border-border/60 shadow-lg">
+          <Loader2 size={32} className="animate-spin text-primary" />
+          <div className="text-center">
+            <div className="text-sm font-medium">{t("sftp.reconnecting.title")}</div>
+            <div className="text-xs text-muted-foreground mt-1">{t("sftp.reconnecting.desc")}</div>
+          </div>
+        </div>
+      </div>
+    )}
+  </>
+);
+};

components/sftp/SftpPaneToolbar.tsx

@@ -0,0 +1,277 @@
+import React from "react";
+import { ChevronLeft, FilePlus, Folder, FolderPlus, Home, RefreshCw, Search, X } from "lucide-react";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import { cn } from "../../lib/utils";
+import { SftpBreadcrumb } from "./index";
+import type { SftpFilenameEncoding } from "../../types";
+import type { SftpPane } from "../../application/state/sftp/types";
+
+interface SftpPaneToolbarProps {
+  t: (key: string, params?: Record<string, unknown>) => string;
+  pane: SftpPane;
+  onNavigateUp: () => void;
+  onNavigateTo: (path: string) => void;
+  onSetFilter: (value: string) => void;
+  onSetFilenameEncoding: (encoding: SftpFilenameEncoding) => void;
+  onRefresh: () => void;
+  showFilterBar: boolean;
+  setShowFilterBar: (open: boolean) => void;
+  filterInputRef: React.RefObject<HTMLInputElement>;
+  isEditingPath: boolean;
+  editingPathValue: string;
+  setEditingPathValue: (value: string) => void;
+  setShowPathSuggestions: (open: boolean) => void;
+  showPathSuggestions: boolean;
+  setPathSuggestionIndex: (value: number) => void;
+  pathSuggestions: { path: string; type: "folder" | "history" }[];
+  pathSuggestionIndex: number;
+  pathInputRef: React.RefObject<HTMLInputElement>;
+  pathDropdownRef: React.RefObject<HTMLDivElement>;
+  handlePathBlur: () => void;
+  handlePathKeyDown: (e: React.KeyboardEvent) => void;
+  handlePathDoubleClick: () => void;
+  handlePathSubmit: (pathOverride?: string) => void;
+  startTransition: React.TransitionStartFunction;
+  getNextUntitledName: (existingNames: string[]) => string;
+  setNewFileName: (value: string) => void;
+  setFileNameError: (value: string | null) => void;
+  setShowNewFileDialog: (open: boolean) => void;
+  setShowNewFolderDialog: (open: boolean) => void;
+}
+
+export const SftpPaneToolbar: React.FC<SftpPaneToolbarProps> = ({
+  t,
+  pane,
+  onNavigateUp,
+  onNavigateTo,
+  onSetFilter,
+  onSetFilenameEncoding,
+  onRefresh,
+  showFilterBar,
+  setShowFilterBar,
+  filterInputRef,
+  isEditingPath,
+  editingPathValue,
+  setEditingPathValue,
+  setShowPathSuggestions,
+  setPathSuggestionIndex,
+  showPathSuggestions,
+  pathSuggestions,
+  pathSuggestionIndex,
+  pathInputRef,
+  pathDropdownRef,
+  handlePathBlur,
+  handlePathKeyDown,
+  handlePathDoubleClick,
+  handlePathSubmit,
+  startTransition,
+  getNextUntitledName,
+  setNewFileName,
+  setFileNameError,
+  setShowNewFileDialog,
+  setShowNewFolderDialog,
+}) => (
+  <>
+    {/* Toolbar - always visible when connected */}
+    <div className="h-7 px-2 flex items-center gap-1 border-b border-border/40 bg-secondary/20">
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-5 w-5"
+        onClick={onNavigateUp}
+        title={t("sftp.goUp")}
+      >
+        <ChevronLeft size={12} />
+      </Button>
+
+      {/* Editable Breadcrumb with autocomplete */}
+      {isEditingPath ? (
+        <div className="relative flex-1">
+          <Input
+            ref={pathInputRef}
+            value={editingPathValue}
+            onChange={(e) => {
+              setEditingPathValue(e.target.value);
+              setShowPathSuggestions(true);
+              setPathSuggestionIndex(-1);
+            }}
+            onBlur={handlePathBlur}
+            onKeyDown={handlePathKeyDown}
+            onFocus={() => setShowPathSuggestions(true)}
+            className="h-5 w-full text-[10px] bg-background"
+            autoFocus
+          />
+          {showPathSuggestions && pathSuggestions.length > 0 && (
+            <div
+              ref={pathDropdownRef}
+              className="absolute top-full left-0 right-0 mt-1 bg-popover border border-border rounded-md shadow-lg z-50 max-h-48 overflow-auto"
+            >
+              {pathSuggestions.map((suggestion, idx) => (
+                <button
+                  key={suggestion.path}
+                  type="button"
+                  className={cn(
+                    "w-full px-3 py-2 text-left text-xs flex items-center gap-2 hover:bg-secondary/60 transition-colors",
+                    idx === pathSuggestionIndex && "bg-secondary/80",
+                  )}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    handlePathSubmit(suggestion.path);
+                  }}
+                >
+                  {suggestion.type === "folder" ? (
+                    <Folder size={12} className="text-primary shrink-0" />
+                  ) : (
+                    <Home
+                      size={12}
+                      className="text-muted-foreground shrink-0"
+                    />
+                  )}
+                  <span className="truncate font-mono">
+                    {suggestion.path}
+                  </span>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      ) : (
+        <div
+          className="flex-1 cursor-text hover:bg-secondary/50 rounded px-1 transition-colors"
+          onDoubleClick={handlePathDoubleClick}
+          title={t("sftp.path.doubleClickToEdit")}
+        >
+          <SftpBreadcrumb
+            path={pane.connection.currentPath}
+            onNavigate={onNavigateTo}
+            onHome={() =>
+              pane.connection?.homeDir &&
+              onNavigateTo(pane.connection.homeDir)
+            }
+          />
+        </div>
+      )}
+
+      <div className="ml-auto flex items-center gap-0.5">
+        {!pane.connection?.isLocal && (
+          <Select
+            value={pane.filenameEncoding}
+            onValueChange={(value) => onSetFilenameEncoding(value as SftpFilenameEncoding)}
+          >
+            <SelectTrigger className="h-6 w-[120px] text-[10px]" title={t("sftp.encoding.label")}>
+              <SelectValue placeholder={t("sftp.encoding.label")} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="auto">{t("sftp.encoding.auto")}</SelectItem>
+              <SelectItem value="utf-8">{t("sftp.encoding.utf8")}</SelectItem>
+              <SelectItem value="gb18030">{t("sftp.encoding.gb18030")}</SelectItem>
+            </SelectContent>
+          </Select>
+        )}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6"
+          onClick={() => setShowNewFolderDialog(true)}
+          title={t("sftp.newFolder")}
+        >
+          <FolderPlus size={14} />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6"
+          onClick={() => {
+            const defaultName = getNextUntitledName(pane.files.map(f => f.name));
+            setNewFileName(defaultName);
+            setFileNameError(null);
+            setShowNewFileDialog(true);
+          }}
+          title={t("sftp.newFile")}
+        >
+          <FilePlus size={14} />
+        </Button>
+        <Button
+          variant={showFilterBar || pane.filter ? "secondary" : "ghost"}
+          size="icon"
+          className={cn("h-6 w-6", pane.filter && "text-primary")}
+          onClick={() => {
+            setShowFilterBar(!showFilterBar);
+            if (!showFilterBar) {
+              setTimeout(() => filterInputRef.current?.focus(), 0);
+            }
+          }}
+          title={t("sftp.filter")}
+        >
+          <Search size={14} />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6"
+          onClick={onRefresh}
+          title={t("common.refresh")}
+        >
+          <RefreshCw
+            size={14}
+            className={
+              pane.loading || pane.reconnecting ? "animate-spin" : ""
+            }
+          />
+        </Button>
+      </div>
+    </div>
+
+    {/* Inline filter bar - appears below toolbar when search is active */}
+    {showFilterBar && (
+      <div className="h-8 px-3 flex items-center gap-2 border-b border-border/40 bg-secondary/10">
+        <div className="relative flex-1">
+          <Search
+            size={12}
+            className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground"
+          />
+          <Input
+            ref={filterInputRef}
+            value={pane.filter}
+            onChange={(e) =>
+              startTransition(() => onSetFilter(e.target.value))
+            }
+            placeholder={t("sftp.filter.placeholder")}
+            className="h-6 w-full pl-7 pr-7 text-xs bg-background"
+            onKeyDown={(e) => {
+              if (e.key === "Escape") {
+                if (pane.filter) {
+                  startTransition(() => onSetFilter(""));
+                } else {
+                  setShowFilterBar(false);
+                }
+              }
+            }}
+          />
+          {pane.filter && (
+            <button
+              onClick={() => startTransition(() => onSetFilter(""))}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              <X size={12} />
+            </button>
+          )}
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6 shrink-0"
+          onClick={() => {
+            startTransition(() => onSetFilter(""));
+            setShowFilterBar(false);
+          }}
+          title={t("common.close")}
+        >
+          <X size={14} />
+        </Button>
+      </div>
+    )}
+  </>
+);

components/sftp/SftpPaneView.tsx

@@ -0,0 +1,370 @@
+import React, { memo, useEffect, useRef, useState, useTransition } from "react";
+import { useI18n } from "../../application/i18n/I18nProvider";
+import { logger } from "../../lib/logger";
+import { useRenderTracker } from "../../lib/useRenderTracker";
+import { cn } from "../../lib/utils";
+import { SftpPaneDialogs } from "./SftpPaneDialogs";
+import { SftpPaneEmptyState } from "./SftpPaneEmptyState";
+import { SftpPaneFileList } from "./SftpPaneFileList";
+import { SftpPaneToolbar } from "./SftpPaneToolbar";
+import {
+  useActiveTabId,
+  useSftpDrag,
+  useSftpHosts,
+  useSftpPaneCallbacks,
+  useSftpShowHiddenFiles,
+} from "./index";
+import type { SftpPane } from "../../application/state/sftp/types";
+import { useSftpPaneDialogs } from "./hooks/useSftpPaneDialogs";
+import { useSftpPaneDragAndSelect } from "./hooks/useSftpPaneDragAndSelect";
+import { useSftpPaneFiles } from "./hooks/useSftpPaneFiles";
+import { useSftpPanePath } from "./hooks/useSftpPanePath";
+import { useSftpPaneSorting } from "./hooks/useSftpPaneSorting";
+import { useSftpPaneVirtualList } from "./hooks/useSftpPaneVirtualList";
+
+interface SftpPaneWrapperProps {
+  side: "left" | "right";
+  paneId: string;
+  isFirstPane: boolean;
+  children: React.ReactNode;
+}
+
+const SftpPaneWrapper = memo<SftpPaneWrapperProps>(({ side, paneId, isFirstPane, children }) => {
+  const activeTabId = useActiveTabId(side);
+  const isActive = activeTabId ? paneId === activeTabId : isFirstPane;
+
+  const containerStyle: React.CSSProperties = isActive
+    ? {}
+    : { visibility: "hidden", pointerEvents: "none" };
+
+  return (
+    <div
+      className={cn("absolute inset-0", isActive ? "z-10" : "z-0")}
+      style={containerStyle}
+    >
+      {children}
+    </div>
+  );
+});
+SftpPaneWrapper.displayName = "SftpPaneWrapper";
+
+interface SftpPaneViewProps {
+  side: "left" | "right";
+  pane: SftpPane;
+  showHeader?: boolean;
+  showEmptyHeader?: boolean;
+}
+
+const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
+  side,
+  pane,
+  showHeader = true,
+  showEmptyHeader = true,
+}) => {
+  const isActive = true;
+
+  const callbacks = useSftpPaneCallbacks(side);
+  const { draggedFiles, onDragStart, onDragEnd } = useSftpDrag();
+  const hosts = useSftpHosts();
+  const showHiddenFiles = useSftpShowHiddenFiles();
+
+  const { t } = useI18n();
+  const [, startTransition] = useTransition();
+  const [showFilterBar, setShowFilterBar] = useState(false);
+  const filterInputRef = useRef<HTMLInputElement>(null);
+
+  useRenderTracker(`SftpPaneView[${side}]`, {
+    side,
+    paneId: pane.id,
+    paneConnected: pane.connected,
+    panePath: pane.currentPath,
+    showHeader,
+    draggedFilesCount: draggedFiles?.length ?? 0,
+  });
+
+  const { sortField, sortOrder, columnWidths, handleSort, handleResizeStart } = useSftpPaneSorting();
+  const { filteredFiles, sortedDisplayFiles } = useSftpPaneFiles({
+    files: pane.files,
+    filter: pane.filter,
+    connection: pane.connection,
+    showHiddenFiles,
+    sortField,
+    sortOrder,
+  });
+  const {
+    isEditingPath,
+    editingPathValue,
+    showPathSuggestions,
+    pathSuggestionIndex,
+    pathInputRef,
+    pathDropdownRef,
+    pathSuggestions,
+    setEditingPathValue,
+    setShowPathSuggestions,
+    setPathSuggestionIndex,
+    handlePathBlur,
+    handlePathKeyDown,
+    handlePathDoubleClick,
+    handlePathSubmit,
+  } = useSftpPanePath({
+    connection: pane.connection,
+    filteredFiles,
+    onNavigateTo: callbacks.onNavigateTo,
+  });
+  const {
+    showHostPicker,
+    hostSearch,
+    showNewFolderDialog,
+    newFolderName,
+    showNewFileDialog,
+    newFileName,
+    fileNameError,
+    showOverwriteConfirm,
+    overwriteTarget,
+    showRenameDialog,
+    renameTarget: _renameTarget,
+    renameName,
+    showDeleteConfirm,
+    deleteTargets,
+    isCreating,
+    isCreatingFile,
+    isRenaming,
+    isDeleting,
+    setShowHostPicker,
+    setHostSearch,
+    setShowNewFolderDialog,
+    setNewFolderName,
+    setShowNewFileDialog,
+    setNewFileName,
+    setFileNameError,
+    setShowOverwriteConfirm,
+    setShowRenameDialog,
+    setRenameName,
+    setShowDeleteConfirm,
+    handleCreateFolder,
+    handleCreateFile,
+    handleConfirmOverwrite,
+    handleRename,
+    handleDelete,
+    openRenameDialog,
+    openDeleteConfirm,
+    getNextUntitledName,
+  } = useSftpPaneDialogs({
+    t,
+    pane,
+    onCreateDirectory: callbacks.onCreateDirectory,
+    onCreateFile: callbacks.onCreateFile,
+    onRenameFile: callbacks.onRenameFile,
+    onDeleteFiles: callbacks.onDeleteFiles,
+    onClearSelection: callbacks.onClearSelection,
+  });
+  const {
+    dragOverEntry,
+    isDragOverPane,
+    paneContainerRef,
+    handlePaneDragOver,
+    handlePaneDragLeave,
+    handlePaneDrop,
+    handleFileDragStart,
+    handleEntryDragOver,
+    handleEntryDrop,
+    handleRowDragLeave,
+    handleRowSelect,
+    handleRowOpen,
+  } = useSftpPaneDragAndSelect({
+    side,
+    pane,
+    sortedDisplayFiles,
+    draggedFiles,
+    onDragStart,
+    onReceiveFromOtherPane: callbacks.onReceiveFromOtherPane,
+    onUploadExternalFiles: callbacks.onUploadExternalFiles,
+    onOpenEntry: callbacks.onOpenEntry,
+    onRangeSelect: callbacks.onRangeSelect,
+    onToggleSelection: callbacks.onToggleSelection,
+  });
+  const {
+    fileListRef,
+    rowHeight,
+    handleFileListScroll,
+    shouldVirtualize,
+    totalHeight,
+    visibleRows,
+  } = useSftpPaneVirtualList({
+    isActive,
+    sortedDisplayFiles,
+  });
+
+  const handleSortWithTransition = (field: typeof sortField) => {
+    startTransition(() => handleSort(field));
+  };
+
+  useEffect(() => {
+    logger.debug("SftpPaneView active state", {
+      side,
+      paneId: pane.id,
+      isActive,
+    });
+  }, [isActive, pane.id, side]);
+
+  if (!pane.connection) {
+    return (
+      <SftpPaneEmptyState
+        side={side}
+        showEmptyHeader={showEmptyHeader}
+        t={t}
+        showHostPicker={showHostPicker}
+        setShowHostPicker={setShowHostPicker}
+        hostSearch={hostSearch}
+        setHostSearch={setHostSearch}
+        hosts={hosts}
+        onConnect={callbacks.onConnect}
+      />
+    );
+  }
+
+  return (
+    <div
+      ref={paneContainerRef}
+      className={cn(
+        "absolute inset-0 flex flex-col transition-colors",
+        isDragOverPane && "bg-primary/5",
+      )}
+      onDragOver={handlePaneDragOver}
+      onDragLeave={handlePaneDragLeave}
+      onDrop={handlePaneDrop}
+    >
+      <SftpPaneToolbar
+        t={t}
+        pane={pane}
+        onNavigateUp={callbacks.onNavigateUp}
+        onNavigateTo={callbacks.onNavigateTo}
+        onSetFilter={callbacks.onSetFilter}
+        onSetFilenameEncoding={callbacks.onSetFilenameEncoding}
+        onRefresh={callbacks.onRefresh}
+        showFilterBar={showFilterBar}
+        setShowFilterBar={setShowFilterBar}
+        filterInputRef={filterInputRef}
+        isEditingPath={isEditingPath}
+        editingPathValue={editingPathValue}
+        setEditingPathValue={setEditingPathValue}
+        setShowPathSuggestions={setShowPathSuggestions}
+        showPathSuggestions={showPathSuggestions}
+        setPathSuggestionIndex={setPathSuggestionIndex}
+        pathSuggestions={pathSuggestions}
+        pathSuggestionIndex={pathSuggestionIndex}
+        pathInputRef={pathInputRef}
+        pathDropdownRef={pathDropdownRef}
+        handlePathBlur={handlePathBlur}
+        handlePathKeyDown={handlePathKeyDown}
+        handlePathDoubleClick={handlePathDoubleClick}
+        handlePathSubmit={handlePathSubmit}
+        startTransition={startTransition}
+        getNextUntitledName={getNextUntitledName}
+        setNewFileName={setNewFileName}
+        setFileNameError={setFileNameError}
+        setShowNewFileDialog={setShowNewFileDialog}
+        setShowNewFolderDialog={setShowNewFolderDialog}
+      />
+
+      <SftpPaneFileList
+        t={t}
+        pane={pane}
+        side={side}
+        columnWidths={columnWidths}
+        sortField={sortField}
+        sortOrder={sortOrder}
+        handleSort={handleSortWithTransition}
+        handleResizeStart={handleResizeStart}
+        fileListRef={fileListRef}
+        handleFileListScroll={handleFileListScroll}
+        shouldVirtualize={shouldVirtualize}
+        totalHeight={totalHeight}
+        sortedDisplayFiles={sortedDisplayFiles}
+        isDragOverPane={isDragOverPane}
+        draggedFiles={draggedFiles}
+        onRefresh={callbacks.onRefresh}
+        setShowNewFolderDialog={setShowNewFolderDialog}
+        setShowNewFileDialog={setShowNewFileDialog}
+        getNextUntitledName={getNextUntitledName}
+        setNewFileName={setNewFileName}
+        setFileNameError={setFileNameError}
+        dragOverEntry={dragOverEntry}
+        handleRowSelect={handleRowSelect}
+        handleRowOpen={handleRowOpen}
+        handleFileDragStart={handleFileDragStart}
+        onDragEnd={onDragEnd}
+        handleEntryDragOver={handleEntryDragOver}
+        handleRowDragLeave={handleRowDragLeave}
+        handleEntryDrop={handleEntryDrop}
+        onCopyToOtherPane={callbacks.onCopyToOtherPane}
+        onOpenFileWith={callbacks.onOpenFileWith}
+        onEditFile={callbacks.onEditFile}
+        onDownloadFile={callbacks.onDownloadFile}
+        onEditPermissions={callbacks.onEditPermissions}
+        openRenameDialog={openRenameDialog}
+        openDeleteConfirm={openDeleteConfirm}
+        rowHeight={rowHeight}
+        visibleRows={visibleRows}
+      />
+
+      <SftpPaneDialogs
+        t={t}
+        showNewFolderDialog={showNewFolderDialog}
+        setShowNewFolderDialog={setShowNewFolderDialog}
+        newFolderName={newFolderName}
+        setNewFolderName={setNewFolderName}
+        handleCreateFolder={handleCreateFolder}
+        isCreating={isCreating}
+        showNewFileDialog={showNewFileDialog}
+        setShowNewFileDialog={setShowNewFileDialog}
+        newFileName={newFileName}
+        setNewFileName={setNewFileName}
+        fileNameError={fileNameError}
+        setFileNameError={setFileNameError}
+        handleCreateFile={handleCreateFile}
+        isCreatingFile={isCreatingFile}
+        showOverwriteConfirm={showOverwriteConfirm}
+        setShowOverwriteConfirm={setShowOverwriteConfirm}
+        overwriteTarget={overwriteTarget}
+        handleOverwriteConfirm={handleConfirmOverwrite}
+        showRenameDialog={showRenameDialog}
+        setShowRenameDialog={setShowRenameDialog}
+        renameName={renameName}
+        setRenameName={setRenameName}
+        handleRename={handleRename}
+        isRenaming={isRenaming}
+        showDeleteConfirm={showDeleteConfirm}
+        setShowDeleteConfirm={setShowDeleteConfirm}
+        deleteTargets={deleteTargets}
+        handleDelete={handleDelete}
+        isDeleting={isDeleting}
+        showHostPicker={showHostPicker}
+        setShowHostPicker={setShowHostPicker}
+        hosts={hosts}
+        side={side}
+        hostSearch={hostSearch}
+        setHostSearch={setHostSearch}
+        onConnect={callbacks.onConnect}
+        onDisconnect={callbacks.onDisconnect}
+      />
+    </div>
+  );
+};
+
+const sftpPaneViewAreEqual = (
+  prev: SftpPaneViewProps,
+  next: SftpPaneViewProps,
+): boolean => {
+  if (prev.pane !== next.pane) return false;
+  if (prev.side !== next.side) return false;
+  if (prev.showHeader !== next.showHeader) return false;
+  if (prev.showEmptyHeader !== next.showEmptyHeader) return false;
+
+  return true;
+};
+
+const SftpPaneView = memo(SftpPaneViewInner, sftpPaneViewAreEqual);
+SftpPaneView.displayName = "SftpPaneView";
+
+export { SftpPaneView, SftpPaneWrapper };

components/sftp/SftpPermissionsDialog.tsx

@@ -2,11 +2,11 @@
  * SFTP Permissions Editor Dialog
  */
 
-import React,{ useEffect,useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import { useI18n } from '../../application/i18n/I18nProvider';
 import { SftpFileEntry } from '../../types';
 import { Button } from '../ui/button';
-import { Dialog,DialogContent,DialogDescription,DialogFooter,DialogHeader,DialogTitle } from '../ui/dialog';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog';
 
 interface SftpPermissionsDialogProps {
     open: boolean;
@@ -15,7 +15,7 @@ interface SftpPermissionsDialogProps {
     onSave: (file: SftpFileEntry, permissions: string) => void;
 }
 
-export const SftpPermissionsDialog: React.FC<SftpPermissionsDialogProps> = ({ open, onOpenChange, file, onSave }) => {
+const SftpPermissionsDialogInner: React.FC<SftpPermissionsDialogProps> = ({ open, onOpenChange, file, onSave }) => {
     const { t } = useI18n();
     const [permissions, setPermissions] = useState({
         owner: { read: false, write: false, execute: false },
@@ -24,10 +24,38 @@ export const SftpPermissionsDialog: React.FC<SftpPermissionsDialogProps> = ({ op
     });
 
     // Parse permissions from file
+    // Supports both symbolic format (rwxr-xr-x) and octal format (755)
     useEffect(() => {
         if (file?.permissions) {
             const perms = file.permissions;
-            // Parse rwxrwxrwx format (skip first char for type)
+
+            // Check if it's octal format (e.g., "755", "644")
+            if (/^[0-7]{3,4}$/.test(perms)) {
+                const octal = perms.length === 4 ? perms.slice(1) : perms;
+                const ownerBits = parseInt(octal[0], 10);
+                const groupBits = parseInt(octal[1], 10);
+                const othersBits = parseInt(octal[2], 10);
+                setPermissions({
+                    owner: {
+                        read: (ownerBits & 4) !== 0,
+                        write: (ownerBits & 2) !== 0,
+                        execute: (ownerBits & 1) !== 0,
+                    },
+                    group: {
+                        read: (groupBits & 4) !== 0,
+                        write: (groupBits & 2) !== 0,
+                        execute: (groupBits & 1) !== 0,
+                    },
+                    others: {
+                        read: (othersBits & 4) !== 0,
+                        write: (othersBits & 2) !== 0,
+                        execute: (othersBits & 1) !== 0,
+                    },
+                });
+                return;
+            }
+
+            // Parse symbolic rwxrwxrwx format (skip first char for type)
             const pStr = perms.length === 10 ? perms.slice(1) : perms;
             if (pStr.length >= 9) {
                 setPermissions({
@@ -139,3 +167,6 @@ export const SftpPermissionsDialog: React.FC<SftpPermissionsDialogProps> = ({ op
         </Dialog>
     );
 };
+
+export const SftpPermissionsDialog = memo(SftpPermissionsDialogInner);
+SftpPermissionsDialog.displayName = 'SftpPermissionsDialog';

components/sftp/SftpTabBar.tsx

@@ -0,0 +1,420 @@
+/**
+ * SFTP Tab Bar Component
+ *
+ * A tab bar for managing multiple SFTP connections in a single pane.
+ * Features:
+ * - Tab items with close button
+ * - Add button (+) to open HostSelectModal
+ * - Scrollable when many tabs are open
+ * - Drag-and-drop reordering of tabs
+ */
+
+import { HardDrive, Monitor, Plus, X } from "lucide-react";
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { useI18n } from "../../application/i18n/I18nProvider";
+import { logger } from "../../lib/logger";
+import { useRenderTracker } from "../../lib/useRenderTracker";
+import { cn } from "../../lib/utils";
+import { useActiveTabId } from "./SftpContext";
+
+export interface SftpTab {
+  id: string;
+  label: string;
+  isLocal: boolean;
+  hostId: string | null;
+}
+
+interface SftpTabBarProps {
+  tabs: SftpTab[];
+  side: "left" | "right";
+  onSelectTab: (tabId: string) => void;
+  onCloseTab: (tabId: string) => void;
+  onAddTab: () => void;
+  onReorderTabs: (
+    draggedId: string,
+    targetId: string,
+    position: "before" | "after",
+  ) => void;
+  /** Called when a tab is dragged to the other side */
+  onMoveTabToOtherSide?: (tabId: string) => void;
+}
+
+const SftpTabBarInner: React.FC<SftpTabBarProps> = ({
+  tabs,
+  side,
+  onSelectTab,
+  onCloseTab,
+  onAddTab,
+  onReorderTabs,
+  onMoveTabToOtherSide,
+}) => {
+  // Subscribe to activeTabId from store (isolated subscription)
+  const activeTabId = useActiveTabId(side);
+
+  // 渲染追踪 - 追踪所有 props 包括回调函数
+  useRenderTracker(`SftpTabBar[${side}]`, {
+    side,
+    tabsCount: tabs.length,
+    activeTabId,
+    // 追踪回调函数引用是否变化
+    onSelectTab,
+    onCloseTab,
+    onAddTab,
+    onReorderTabs,
+    onMoveTabToOtherSide,
+  });
+
+  const { t } = useI18n();
+
+  // Refs for scrollable tab container
+  const tabsContainerRef = useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  // Drag state
+  const [dropIndicator, setDropIndicator] = useState<{
+    tabId: string;
+    position: "before" | "after";
+  } | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isCrossPaneDragOver, setIsCrossPaneDragOver] = useState(false);
+  const draggedTabIdRef = useRef<string | null>(null);
+
+  // Global dragend listener to ensure state is reset even if the dragged element is removed
+  useEffect(() => {
+    const handleGlobalDragEnd = () => {
+      if (draggedTabIdRef.current) {
+        draggedTabIdRef.current = null;
+        setDropIndicator(null);
+        setIsDragging(false);
+        setIsCrossPaneDragOver(false);
+      }
+    };
+
+    document.addEventListener("dragend", handleGlobalDragEnd);
+    return () => document.removeEventListener("dragend", handleGlobalDragEnd);
+  }, []);
+
+  // Check scroll state
+  const updateScrollState = useCallback(() => {
+    const container = tabsContainerRef.current;
+    if (container) {
+      setCanScrollLeft(container.scrollLeft > 0);
+      setCanScrollRight(
+        container.scrollLeft < container.scrollWidth - container.clientWidth - 1,
+      );
+    }
+  }, []);
+
+  // Update scroll state on mount and resize
+  useEffect(() => {
+    updateScrollState();
+    const container = tabsContainerRef.current;
+    if (container) {
+      container.addEventListener("scroll", updateScrollState);
+      const resizeObserver = new ResizeObserver(updateScrollState);
+      resizeObserver.observe(container);
+      return () => {
+        container.removeEventListener("scroll", updateScrollState);
+        resizeObserver.disconnect();
+      };
+    }
+  }, [updateScrollState, tabs]);
+
+  // Scroll to active tab when it changes
+  useLayoutEffect(() => {
+    if (!activeTabId) return;
+    const container = tabsContainerRef.current;
+    if (!container) return;
+
+    const activeTabElement = container.querySelector(
+      `[data-tab-id="${activeTabId}"]`,
+    ) as HTMLElement | null;
+    if (activeTabElement) {
+      const containerRect = container.getBoundingClientRect();
+      const tabRect = activeTabElement.getBoundingClientRect();
+
+      if (tabRect.left < containerRect.left) {
+        container.scrollLeft -= containerRect.left - tabRect.left + 8;
+      } else if (tabRect.right > containerRect.right) {
+        container.scrollLeft += tabRect.right - containerRect.right + 8;
+      }
+    }
+    setTimeout(updateScrollState, 100);
+  }, [activeTabId, updateScrollState]);
+
+  // Drag handlers
+  const handleTabDragStart = useCallback(
+    (e: React.DragEvent, tabId: string) => {
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("sftp-tab-id", tabId);
+      e.dataTransfer.setData("sftp-tab-side", side);
+      draggedTabIdRef.current = tabId;
+      setTimeout(() => {
+        setIsDragging(true);
+      }, 0);
+    },
+    [side],
+  );
+
+  const handleTabDragEnd = useCallback(() => {
+    draggedTabIdRef.current = null;
+    setDropIndicator(null);
+    setIsDragging(false);
+  }, []);
+
+  const handleTabDragOver = useCallback(
+    (e: React.DragEvent, tabId: string) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+
+      if (!draggedTabIdRef.current || draggedTabIdRef.current === tabId) {
+        return;
+      }
+
+      const rect = e.currentTarget.getBoundingClientRect();
+      const midpoint = rect.left + rect.width / 2;
+      const position: "before" | "after" =
+        e.clientX < midpoint ? "before" : "after";
+
+      setDropIndicator({ tabId, position });
+    },
+    [],
+  );
+
+  const handleTabDrop = useCallback(
+    (e: React.DragEvent, targetTabId: string) => {
+      e.preventDefault();
+      const draggedId =
+        e.dataTransfer.getData("sftp-tab-id") || draggedTabIdRef.current;
+
+      if (draggedId && draggedId !== targetTabId && dropIndicator) {
+        onReorderTabs(draggedId, targetTabId, dropIndicator.position);
+      }
+
+      setDropIndicator(null);
+      setIsDragging(false);
+    },
+    [dropIndicator, onReorderTabs],
+  );
+
+  const handleCloseTab = useCallback(
+    (e: React.MouseEvent, tabId: string) => {
+      e.stopPropagation();
+      onCloseTab(tabId);
+    },
+    [onCloseTab],
+  );
+
+  // Cross-pane drag handlers
+  const handleCrossPaneDragOver = useCallback(
+    (e: React.DragEvent) => {
+      const draggedFromSide = e.dataTransfer.types.includes("sftp-tab-side");
+      if (!draggedFromSide) return;
+
+      // Check if this is from the other side (we can't read the data during dragover due to browser security)
+      // We'll set the indicator and validate on drop
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      setIsCrossPaneDragOver(true);
+    },
+    [],
+  );
+
+  const handleCrossPaneDragLeave = useCallback(() => {
+    setIsCrossPaneDragOver(false);
+  }, []);
+
+  const handleCrossPaneDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      setIsCrossPaneDragOver(false);
+
+      const draggedId = e.dataTransfer.getData("sftp-tab-id");
+      const draggedFromSide = e.dataTransfer.getData("sftp-tab-side");
+
+      // Only accept drops from the other side
+      if (draggedId && draggedFromSide && draggedFromSide !== side && onMoveTabToOtherSide) {
+        logger.info("[SftpTabBar] Cross-pane drop", {
+          tabId: draggedId,
+          fromSide: draggedFromSide,
+          toSide: side,
+        });
+        onMoveTabToOtherSide(draggedId);
+      }
+
+      // Always reset drag state on drop
+      draggedTabIdRef.current = null;
+      setDropIndicator(null);
+      setIsDragging(false);
+    },
+    [side, onMoveTabToOtherSide],
+  );
+
+  return (
+    <div
+      className={cn(
+        "flex items-stretch h-8 bg-secondary/30 border-b border-border/40 transition-colors",
+        isCrossPaneDragOver && "bg-primary/10 ring-1 ring-inset ring-primary/40",
+      )}
+      onDragOver={handleCrossPaneDragOver}
+      onDragLeave={handleCrossPaneDragLeave}
+      onDrop={handleCrossPaneDrop}
+    >
+      {/* Scrollable tabs container */}
+      <div className="relative flex-1 min-w-0 flex">
+        {/* Left fade mask */}
+        {canScrollLeft && (
+          <div
+            className="absolute left-0 top-0 bottom-0 w-6 pointer-events-none z-10"
+            style={{
+              background:
+                "linear-gradient(to right, hsl(var(--secondary) / 0.9), transparent)",
+            }}
+          />
+        )}
+
+        <div
+          ref={tabsContainerRef}
+          className="flex items-stretch overflow-x-auto scrollbar-none max-w-full"
+          style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
+        >
+          {tabs.map((tab) => {
+            const isActive = activeTabId === tab.id;
+            const isBeingDragged =
+              isDragging && draggedTabIdRef.current === tab.id;
+            const showDropIndicatorBefore =
+              dropIndicator?.tabId === tab.id &&
+              dropIndicator.position === "before";
+            const showDropIndicatorAfter =
+              dropIndicator?.tabId === tab.id &&
+              dropIndicator.position === "after";
+
+            return (
+              <div
+                key={tab.id}
+                data-tab-id={tab.id}
+                onClick={() => onSelectTab(tab.id)}
+                draggable
+                onDragStart={(e) => handleTabDragStart(e, tab.id)}
+                onDragEnd={handleTabDragEnd}
+                onDragOver={(e) => handleTabDragOver(e, tab.id)}
+                onDrop={(e) => handleTabDrop(e, tab.id)}
+                className={cn(
+                  "relative px-3 min-w-[100px] max-w-[180px] text-xs font-medium cursor-pointer flex items-center justify-between gap-2 flex-shrink-0 border-r border-border/40",
+                  "transition-[color,opacity,transform] duration-100 ease-out",
+                  isActive
+                    ? "text-foreground border-b-2"
+                    : "text-muted-foreground hover:text-foreground",
+                  isBeingDragged && "opacity-50",
+                )}
+                style={
+                  isActive
+                    ? { borderBottomColor: "hsl(var(--accent))" }
+                    : undefined
+                }
+              >
+                {/* Drop indicator line - before */}
+                {showDropIndicatorBefore && isDragging && (
+                  <div className="absolute left-0 top-1 bottom-1 w-0.5 bg-primary shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
+                )}
+                {/* Drop indicator line - after */}
+                {showDropIndicatorAfter && isDragging && (
+                  <div className="absolute right-0 top-1 bottom-1 w-0.5 bg-primary shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
+                )}
+
+                <div className="flex items-center gap-1.5 min-w-0 flex-1">
+                  {tab.isLocal ? (
+                    <Monitor
+                      size={12}
+                      className={cn(
+                        "shrink-0",
+                        isActive ? "text-primary" : "text-muted-foreground",
+                      )}
+                    />
+                  ) : (
+                    <HardDrive
+                      size={12}
+                      className={cn(
+                        "shrink-0",
+                        isActive ? "text-primary" : "text-muted-foreground",
+                      )}
+                    />
+                  )}
+                  <span className="truncate">{tab.label}</span>
+                </div>
+
+                <button
+                  onClick={(e) => handleCloseTab(e, tab.id)}
+                  className="p-0.5 hover:bg-destructive/10 hover:text-destructive transition-colors shrink-0"
+                  aria-label={t("common.close")}
+                >
+                  <X size={12} />
+                </button>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Right fade mask */}
+        {canScrollRight && (
+          <div
+            className="absolute right-0 top-0 bottom-0 w-6 pointer-events-none z-10"
+            style={{
+              background:
+                "linear-gradient(to left, hsl(var(--secondary) / 0.9), transparent)",
+            }}
+          />
+        )}
+      </div>
+
+      {/* 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}
+        title={t("sftp.tabs.addTab")}
+      >
+        <Plus size={14} />
+      </button>
+    </div>
+  );
+};
+
+// Custom comparison - only re-render when data props change, ignore callback refs
+// Note: activeTabId is now subscribed internally, not passed as prop
+const sftpTabBarAreEqual = (
+  prev: SftpTabBarProps,
+  next: SftpTabBarProps,
+): boolean => {
+  // Compare data props only
+  if (prev.side !== next.side) return false;
+  if (prev.tabs.length !== next.tabs.length) return false;
+
+  // Deep compare tabs array
+  for (let i = 0; i < prev.tabs.length; i++) {
+    const prevTab = prev.tabs[i];
+    const nextTab = next.tabs[i];
+    if (
+      prevTab.id !== nextTab.id ||
+      prevTab.label !== nextTab.label ||
+      prevTab.isLocal !== nextTab.isLocal ||
+      prevTab.hostId !== nextTab.hostId
+    ) {
+      return false;
+    }
+  }
+
+  // Ignore callback function refs - they may change but behavior is stable
+  return true;
+};
+
+export const SftpTabBar = memo(SftpTabBarInner, sftpTabBarAreEqual);
+SftpTabBar.displayName = "SftpTabBar";
+

components/sftp/SftpTransferItem.tsx

@@ -5,12 +5,13 @@
 import {
 ArrowDown,
 CheckCircle2,
+FolderUp,
 Loader2,
 RefreshCw,
 X,
 XCircle,
 } from 'lucide-react';
-import React,{ memo } from 'react';
+import React,{ memo, useRef, useEffect } from 'react';
 import { cn } from '../../lib/utils';
 import { TransferTask } from '../../types';
 import { Button } from '../ui/button';
@@ -26,11 +27,49 @@ interface SftpTransferItemProps {
 const SftpTransferItemInner: React.FC<SftpTransferItemProps> = ({ task, onCancel, onRetry, onDismiss }) => {
     const progress = task.totalBytes > 0 ? Math.min((task.transferredBytes / task.totalBytes) * 100, 100) : 0;
 
-    const speedFormatted = formatSpeed(task.speed);
+    // Use refs to store stable display values and prevent flickering
+    const lastSpeedRef = useRef<number>(0);
+    const lastSpeedTimeRef = useRef<number>(Date.now());
+    const displaySpeedRef = useRef<string>('');
 
+    // Update speed display with smoothing - only update if speed is stable for a moment
+    useEffect(() => {
+        if (task.status !== 'transferring') {
+            displaySpeedRef.current = '';
+            lastSpeedRef.current = 0;
+            return;
+        }
+
+        const now = Date.now();
+        const timeSinceLastUpdate = now - lastSpeedTimeRef.current;
+
+        // Only update speed display if:
+        // 1. Speed is above threshold (100 bytes/s)
+        // 2. Either it's been at least 500ms since last update, or speed changed significantly (>50%)
+        if (task.speed > 100) {
+            const speedChange = Math.abs(task.speed - lastSpeedRef.current);
+            const significantChange = lastSpeedRef.current > 0 && speedChange / lastSpeedRef.current > 0.5;
+
+            if (timeSinceLastUpdate >= 500 || significantChange || lastSpeedRef.current === 0) {
+                lastSpeedRef.current = task.speed;
+                lastSpeedTimeRef.current = now;
+                displaySpeedRef.current = formatSpeed(task.speed);
+            }
+        } else if (task.speed === 0 && lastSpeedRef.current > 0) {
+            // Don't immediately clear speed when it drops to 0
+            // Keep showing last speed for a short period
+            if (timeSinceLastUpdate >= 1000) {
+                lastSpeedRef.current = 0;
+                displaySpeedRef.current = '';
+            }
+        }
+    }, [task.speed, task.status]);
+
+    // Calculate remaining time based on stable speed
     const remainingBytes = task.totalBytes - task.transferredBytes;
-    const remainingTime = task.speed > 0
-        ? Math.ceil(remainingBytes / task.speed)
+    const stableSpeed = lastSpeedRef.current > 0 ? lastSpeedRef.current : task.speed;
+    const remainingTime = stableSpeed > 0
+        ? Math.ceil(remainingBytes / stableSpeed)
         : 0;
     const remainingFormatted = remainingTime > 60
         ? `~${Math.ceil(remainingTime / 60)}m left`
@@ -45,11 +84,17 @@ const SftpTransferItemInner: React.FC<SftpTransferItemProps> = ({ task, onCancel
             ? formatTransferBytes(task.totalBytes)
             : '';
 
+    // Use the stable display speed
+    const speedFormatted = displaySpeedRef.current;
+
     return (
         <div className="flex items-center gap-3 px-4 py-2.5 bg-background/60 border-t border-border/40 backdrop-blur-sm">
             <div className="h-6 w-6 rounded flex items-center justify-center shrink-0">
                 {task.status === 'transferring' && <Loader2 size={14} className="animate-spin text-primary" />}
-                {task.status === 'pending' && <ArrowDown size={14} className="text-muted-foreground animate-bounce" />}
+                {task.status === 'pending' && (task.isDirectory
+                    ? <FolderUp size={14} className="text-muted-foreground animate-pulse" />
+                    : <ArrowDown size={14} className="text-muted-foreground animate-bounce" />
+                )}
                 {task.status === 'completed' && <CheckCircle2 size={14} className="text-green-500" />}
                 {task.status === 'failed' && <XCircle size={14} className="text-destructive" />}
                 {task.status === 'cancelled' && <XCircle size={14} className="text-muted-foreground" />}
@@ -59,10 +104,10 @@ const SftpTransferItemInner: React.FC<SftpTransferItemProps> = ({ task, onCancel
                 <div className="flex items-center gap-2">
                     <span className="text-sm truncate font-medium">{task.fileName}</span>
                     {task.status === 'transferring' && speedFormatted && (
-                        <span className="text-xs text-primary/80 font-mono">{speedFormatted}</span>
+                        <span className="text-xs text-primary/80 font-mono transition-opacity duration-300">{speedFormatted}</span>
                     )}
                     {task.status === 'transferring' && remainingFormatted && (
-                        <span className="text-xs text-muted-foreground">{remainingFormatted}</span>
+                        <span className="text-xs text-muted-foreground transition-opacity duration-300">{remainingFormatted}</span>
                     )}
                 </div>
                 {(task.status === 'transferring' || task.status === 'pending') && (
@@ -133,5 +178,44 @@ const SftpTransferItemInner: React.FC<SftpTransferItemProps> = ({ task, onCancel
     );
 };
 
-export const SftpTransferItem = memo(SftpTransferItemInner);
+// Custom comparison function to reduce unnecessary re-renders
+// Only re-render if meaningful values change
+const arePropsEqual = (
+    prevProps: 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;
+
+    // For transferring status, throttle updates based on progress
+    if (next.status === 'transferring') {
+        // Re-render if progress changed by more than 0.5%
+        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.5) return false;
+
+        // Re-render periodically for speed updates (every ~500ms based on speed changes)
+        // The component uses refs to smooth speed display, so we allow more frequent renders
+        const speedDiff = Math.abs(next.speed - prev.speed);
+        if (speedDiff > 1000) return false; // Re-render if speed changed by more than 1KB/s
+    }
+
+    // For pending status, don't re-render unless status changes
+    if (next.status === 'pending') {
+        return true;
+    }
+
+    return true;
+};
+
+export const SftpTransferItem = memo(SftpTransferItemInner, arePropsEqual);
 SftpTransferItem.displayName = 'SftpTransferItem';

components/sftp/hooks/useSftpPaneDialogs.ts

@@ -0,0 +1,283 @@
+import { useCallback, useState } from "react";
+import type { SftpPaneCallbacks } from "../SftpContext";
+import type { SftpPane } from "../../../application/state/sftp/types";
+
+interface UseSftpPaneDialogsParams {
+  t: (key: string, params?: Record<string, unknown>) => string;
+  pane: SftpPane;
+  onCreateDirectory: SftpPaneCallbacks["onCreateDirectory"];
+  onCreateFile: SftpPaneCallbacks["onCreateFile"];
+  onRenameFile: SftpPaneCallbacks["onRenameFile"];
+  onDeleteFiles: SftpPaneCallbacks["onDeleteFiles"];
+  onClearSelection: SftpPaneCallbacks["onClearSelection"];
+}
+
+interface UseSftpPaneDialogsResult {
+  showHostPicker: boolean;
+  hostSearch: string;
+  showNewFolderDialog: boolean;
+  newFolderName: string;
+  showNewFileDialog: boolean;
+  newFileName: string;
+  fileNameError: string | null;
+  showOverwriteConfirm: boolean;
+  overwriteTarget: string | null;
+  showRenameDialog: boolean;
+  renameTarget: string | null;
+  renameName: string;
+  showDeleteConfirm: boolean;
+  deleteTargets: string[];
+  isCreating: boolean;
+  isCreatingFile: boolean;
+  isRenaming: boolean;
+  isDeleting: boolean;
+  setShowHostPicker: (open: boolean) => void;
+  setHostSearch: (value: string) => void;
+  setShowNewFolderDialog: (open: boolean) => void;
+  setNewFolderName: (value: string) => void;
+  setShowNewFileDialog: (open: boolean) => void;
+  setNewFileName: (value: string) => void;
+  setFileNameError: (value: string | null) => void;
+  setShowOverwriteConfirm: (open: boolean) => void;
+  setShowRenameDialog: (open: boolean) => void;
+  setRenameName: (value: string) => void;
+  setShowDeleteConfirm: (open: boolean) => void;
+  handleCreateFolder: () => Promise<void>;
+  handleCreateFile: (forceOverwrite?: boolean) => Promise<void>;
+  handleConfirmOverwrite: () => Promise<void>;
+  handleRename: () => Promise<void>;
+  handleDelete: () => Promise<void>;
+  openRenameDialog: (name: string) => void;
+  openDeleteConfirm: (names: string[]) => void;
+  getNextUntitledName: (existingFiles: string[]) => string;
+}
+
+export const useSftpPaneDialogs = ({
+  t,
+  pane,
+  onCreateDirectory,
+  onCreateFile,
+  onRenameFile,
+  onDeleteFiles,
+  onClearSelection,
+}: UseSftpPaneDialogsParams): UseSftpPaneDialogsResult => {
+  const [showHostPicker, setShowHostPicker] = useState(false);
+  const [hostSearch, setHostSearch] = useState("");
+  const [showNewFolderDialog, setShowNewFolderDialog] = useState(false);
+  const [newFolderName, setNewFolderName] = useState("");
+  const [showNewFileDialog, setShowNewFileDialog] = useState(false);
+  const [newFileName, setNewFileName] = useState("");
+  const [fileNameError, setFileNameError] = useState<string | null>(null);
+  const [showOverwriteConfirm, setShowOverwriteConfirm] = useState(false);
+  const [overwriteTarget, setOverwriteTarget] = useState<string | null>(null);
+  const [showRenameDialog, setShowRenameDialog] = useState(false);
+  const [renameTarget, setRenameTarget] = useState<string | null>(null);
+  const [renameName, setRenameName] = useState("");
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [deleteTargets, setDeleteTargets] = useState<string[]>([]);
+  const [isCreating, setIsCreating] = useState(false);
+  const [isCreatingFile, setIsCreatingFile] = useState(false);
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  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;
+
+      const invalidMatch = trimmed.match(INVALID_FILENAME_CHARS);
+      if (invalidMatch) {
+        return t("sftp.error.invalidFileName", { chars: invalidMatch[0] });
+      }
+
+      const baseName = trimmed.split(".")[0].toUpperCase();
+      if (RESERVED_NAMES.has(baseName)) {
+        return t("sftp.error.reservedName");
+      }
+
+      return null;
+    },
+    [t],
+  );
+
+  const getNextUntitledName = useCallback((existingFiles: string[]): string => {
+    const existingSet = new Set(existingFiles.map((f) => f.toLowerCase()));
+
+    if (!existingSet.has("untitled.txt")) {
+      return "untitled.txt";
+    }
+
+    let counter = 1;
+    while (counter < 1000) {
+      const name = `untitled (${counter}).txt`;
+      if (!existingSet.has(name.toLowerCase())) {
+        return name;
+      }
+      counter++;
+    }
+
+    return `untitled_${Date.now()}.txt`;
+  }, []);
+
+  const handleCreateFolder = async () => {
+    if (!newFolderName.trim() || isCreating) return;
+    setIsCreating(true);
+    try {
+      await onCreateDirectory(newFolderName.trim());
+      setShowNewFolderDialog(false);
+      setNewFolderName("");
+    } catch {
+      /* Error handling */
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const handleCreateFile = async (forceOverwrite = false) => {
+    const trimmedName = newFileName.trim();
+    if (!trimmedName || isCreatingFile) return;
+
+    const error = validateFileName(trimmedName);
+    if (error) {
+      setFileNameError(error);
+      return;
+    }
+
+    if (!forceOverwrite) {
+      const existingFile = pane.files.find(
+        (f) =>
+          f.name.toLowerCase() === trimmedName.toLowerCase() && f.type === "file",
+      );
+      if (existingFile) {
+        setOverwriteTarget(trimmedName);
+        setShowOverwriteConfirm(true);
+        return;
+      }
+    }
+
+    setIsCreatingFile(true);
+    try {
+      await onCreateFile(trimmedName);
+      setShowNewFileDialog(false);
+      setShowOverwriteConfirm(false);
+      setOverwriteTarget(null);
+      setNewFileName("");
+      setFileNameError(null);
+    } catch {
+      /* Error handling */
+    } finally {
+      setIsCreatingFile(false);
+    }
+  };
+
+  const handleConfirmOverwrite = async () => {
+    await handleCreateFile(true);
+  };
+
+  const handleRename = async () => {
+    if (!renameTarget || !renameName.trim() || isRenaming) return;
+    setIsRenaming(true);
+    try {
+      await onRenameFile(renameTarget, renameName.trim());
+      setShowRenameDialog(false);
+      setRenameTarget(null);
+      setRenameName("");
+    } catch {
+      /* Error handling */
+    } finally {
+      setIsRenaming(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (deleteTargets.length === 0 || isDeleting) return;
+    setIsDeleting(true);
+    try {
+      await onDeleteFiles(deleteTargets);
+      setShowDeleteConfirm(false);
+      setDeleteTargets([]);
+      onClearSelection();
+    } catch {
+      /* Error handling */
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const openRenameDialog = useCallback((name: string) => {
+    setRenameTarget(name);
+    setRenameName(name);
+    setShowRenameDialog(true);
+  }, []);
+
+  const openDeleteConfirm = useCallback((names: string[]) => {
+    setDeleteTargets(names);
+    setShowDeleteConfirm(true);
+  }, []);
+
+  return {
+    showHostPicker,
+    hostSearch,
+    showNewFolderDialog,
+    newFolderName,
+    showNewFileDialog,
+    newFileName,
+    fileNameError,
+    showOverwriteConfirm,
+    overwriteTarget,
+    showRenameDialog,
+    renameTarget,
+    renameName,
+    showDeleteConfirm,
+    deleteTargets,
+    isCreating,
+    isCreatingFile,
+    isRenaming,
+    isDeleting,
+    setShowHostPicker,
+    setHostSearch,
+    setShowNewFolderDialog,
+    setNewFolderName,
+    setShowNewFileDialog,
+    setNewFileName,
+    setFileNameError,
+    setShowOverwriteConfirm,
+    setShowRenameDialog,
+    setRenameName,
+    setShowDeleteConfirm,
+    handleCreateFolder,
+    handleCreateFile,
+    handleConfirmOverwrite,
+    handleRename,
+    handleDelete,
+    openRenameDialog,
+    openDeleteConfirm,
+    getNextUntitledName,
+  };
+};