Merge pull request #150 from binaricat/fix/reset-upload-trigger-on-new-entries

fix: reset upload trigger when new drop entries arrive

.claude/settings.local.json

@@ -3,7 +3,17 @@
     "allow": [
       "Bash(npx tsc:*)",
       "Bash(npm run lint:*)",
-      "Bash(npm run build:*)"
+      "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/scripts/generate-release-note.js

@@ -0,0 +1,104 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Determine version priority:
+// 1. VERSION env variable
+// 2. Valid version tag (v1.2.3 format)
+// 3. Short commit ID (first 7 chars of GITHUB_SHA)
+// 4. package.json version as fallback
+function getVersion() {
+  if (process.env.VERSION) {
+    return process.env.VERSION;
+  }
+
+  const refName = process.env.GITHUB_REF_NAME;
+  // Check if refName is a valid version tag (e.g., v1.2.3)
+  if (refName && /^v\d+\.\d+\.\d+/.test(refName)) {
+    return refName.replace(/^v/, '');
+  }
+
+  // Use short commit ID
+  const sha = process.env.GITHUB_SHA;
+  if (sha) {
+    return sha.substring(0, 7);
+  }
+
+  // Fall back to package.json version
+  try {
+    const pkgPath = path.join(__dirname, '..', '..', 'package.json');
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+    return pkg.version;
+  } catch {
+    return '0.0.0';
+  }
+}
+
+const version = getVersion();
+const repo = process.env.GITHUB_REPOSITORY || 'binaricat/netcatty';
+// For tag releases, use the tag; for workflow_dispatch, create a tag from version
+const tag = (process.env.GITHUB_REF_NAME && /^v\d+\.\d+\.\d+/.test(process.env.GITHUB_REF_NAME))
+  ? process.env.GITHUB_REF_NAME
+  : `v${version}`;
+const baseUrl = `https://github.com/${repo}/releases/download/${tag}`;
+
+// Filename patterns based on electron-builder.config.cjs artifactName: '${productName}-${version}-${os}-${arch}.${ext}'
+const files = {
+  mac: {
+    arm64: `Netcatty-${version}-mac-arm64.dmg`,
+    x64: `Netcatty-${version}-mac-x64.dmg`
+  },
+  win: {
+    x64: `Netcatty-${version}-win-x64.exe`,
+    arm64: `Netcatty-${version}-win-arm64.exe`
+  },
+  linux: {
+    appimage: {
+      x64: `Netcatty-${version}-linux-x64.AppImage`,
+      arm64: `Netcatty-${version}-linux-arm64.AppImage`
+    },
+    deb: {
+      x64: `Netcatty-${version}-linux-x64.deb`,
+      arm64: `Netcatty-${version}-linux-arm64.deb`
+    },
+    rpm: {
+      x64: `Netcatty-${version}-linux-x64.rpm`,
+      arm64: `Netcatty-${version}-linux-arm64.rpm`
+    }
+  }
+};
+
+const badges = {
+  win: {
+    setup_x64: `[![Setup x64](https://img.shields.io/badge/Setup-x64-0078D6?style=flat-square&logo=windows)](${baseUrl}/${files.win.x64})`,
+    setup_arm64: `[![Setup arm64](https://img.shields.io/badge/Setup-arm64-0078D6?style=flat-square&logo=windows)](${baseUrl}/${files.win.arm64})`
+  },
+  mac: {
+    apple_silicon: `[![DMG Apple Silicon](https://img.shields.io/badge/DMG-Apple_Silicon-000000?style=flat-square&logo=apple)](${baseUrl}/${files.mac.arm64})`,
+    intel: `[![DMG Intel X64](https://img.shields.io/badge/DMG-Intel_X64-000000?style=flat-square&logo=apple)](${baseUrl}/${files.mac.x64})`
+  },
+  linux: {
+    appimage_x64: `[![AppImage x64](https://img.shields.io/badge/AppImage-x64-FCC624?style=flat-square&logo=linux)](${baseUrl}/${files.linux.appimage.x64})`,
+    appimage_arm64: `[![AppImage arm64](https://img.shields.io/badge/AppImage-arm64-FCC624?style=flat-square&logo=linux)](${baseUrl}/${files.linux.appimage.arm64})`,
+    deb_x64: `[![DebPackage x64](https://img.shields.io/badge/DebPackage-x64-A80030?style=flat-square&logo=debian)](${baseUrl}/${files.linux.deb.x64})`,
+    deb_arm64: `[![DebPackage arm64](https://img.shields.io/badge/DebPackage-arm64-A80030?style=flat-square&logo=debian)](${baseUrl}/${files.linux.deb.arm64})`,
+    rpm_x64: `[![RpmPackage x64](https://img.shields.io/badge/RpmPackage-x64-CC0000?style=flat-square&logo=redhat)](${baseUrl}/${files.linux.rpm.x64})`,
+    rpm_arm64: `[![RpmPackage arm64](https://img.shields.io/badge/RpmPackage-arm64-CC0000?style=flat-square&logo=redhat)](${baseUrl}/${files.linux.rpm.arm64})`
+  }
+};
+
+const content = `
+## Download based on your OS:
+
+| OS | Download |
+| :--- | :--- |
+| **Windows** | ${badges.win.setup_x64} ${badges.win.setup_arm64} |
+| **macOS** | ${badges.mac.apple_silicon} ${badges.mac.intel} |
+| **Linux** | ${badges.linux.appimage_x64} ${badges.linux.deb_x64} ${badges.linux.rpm_x64} <br> ${badges.linux.appimage_arm64} ${badges.linux.deb_arm64} ${badges.linux.rpm_arm64} |
+`;
+
+fs.writeFileSync('release_notes.md', content);
+console.log('Generated release_notes.md');

.github/workflows/build.yml

@@ -37,11 +37,16 @@ jobs:
       - name: Install deps
         run: npm ci
 
-      - name: Set version from tag
-        if: startsWith(github.ref, 'refs/tags/v')
+      - name: Set version
         shell: bash
         run: |
-          VERSION="${GITHUB_REF_NAME#v}"
+          if [[ "$GITHUB_REF" == refs/tags/v* ]]; then
+            # Tag release: use version from tag
+            VERSION="${GITHUB_REF_NAME#v}"
+          else
+            # workflow_dispatch: use short commit ID
+            VERSION="${GITHUB_SHA:0:7}"
+          fi
           echo "Setting version to ${VERSION}"
           npm pkg set version="${VERSION}"
 
@@ -70,15 +75,12 @@ jobs:
           name: netcatty-${{ matrix.os }}
           path: |
             release/*.dmg
-            release/*.zip
             release/*.exe
             release/*.msi
             release/*.AppImage
             release/*.deb
             release/*.rpm
             release/*.tar.gz
-            release/*.blockmap
-            release/latest*.yml
           if-no-files-found: ignore
 
   release:
@@ -101,20 +103,23 @@ jobs:
       - name: List artifacts
         run: ls -la artifacts/
 
+      - name: Generate Release Body
+        run: node .github/scripts/generate-release-note.js
+        env:
+          GITHUB_REF_NAME: ${{ github.ref_name }}
+          GITHUB_REPOSITORY: ${{ github.repository }}
+          GITHUB_SHA: ${{ github.sha }}
+
       - name: Create GitHub Release
         uses: softprops/action-gh-release@v2
         with:
+          body_path: release_notes.md
           files: |
             artifacts/*.dmg
-            artifacts/*.zip
             artifacts/*.exe
-            artifacts/*.msi
             artifacts/*.AppImage
             artifacts/*.deb
             artifacts/*.rpm
-            artifacts/*.tar.gz
-            artifacts/*.blockmap
-            artifacts/latest*.yml
           generate_release_notes: true
           fail_on_unmatched_files: false
           token: ${{ secrets.RELEASE_TOKEN }}

.github/workflows/sync.yml

@@ -0,0 +1,42 @@
+name: Sync Upstream
+
+env:
+  UPSTREAM_URL: "https://github.com/binaricat/Netcatty.git"
+  UPSTREAM_BRANCH: "main"
+  TARGET_BRANCH: "main"
+
+on:
+  schedule:
+    - cron: '0 0 * * *'  # Run daily at midnight
+  workflow_dispatch:      # Allow manual trigger
+
+jobs:
+  sync:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ env.TARGET_BRANCH }}
+          fetch-depth: 0
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Configure Git
+        run: |
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+
+      - name: Merge Upstream
+        run: |
+          echo "Adding upstream remote..."
+          git remote add upstream ${{ env.UPSTREAM_URL }}
+          git fetch upstream ${{ env.UPSTREAM_BRANCH }}
+          
+          echo "Merging upstream/${{ env.UPSTREAM_BRANCH }} into ${{ env.TARGET_BRANCH }}..."
+          # This will fail if there are conflicts, which is the desired behavior (notify user via failure)
+          git merge upstream/${{ env.UPSTREAM_BRANCH }} --no-edit
+          
+          echo "Pushing changes..."
+          git push origin ${{ env.TARGET_BRANCH }}

App.tsx

@@ -1,6 +1,7 @@
 import React, { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { activeTabStore, useActiveTabId, useIsSftpActive, useIsTerminalLayerVisible, useIsVaultActive } from './application/state/activeTabStore';
 import { useAutoSync } from './application/state/useAutoSync';
+import { useManagedSourceSync } from './application/state/useManagedSourceSync';
 import { usePortForwardingAutoStart } from './application/state/usePortForwardingAutoStart';
 import { useSessionState } from './application/state/useSessionState';
 import { useSettingsState } from './application/state/useSettingsState';
@@ -8,6 +9,7 @@ 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';
@@ -20,6 +22,7 @@ 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 { PassphraseModal, PassphraseRequest } from './components/PassphraseModal';
 import { cn } from './lib/utils';
 import { ConnectionLog, Host, HostProtocol, SerialConfig, TerminalTheme } from './types';
 import { LogView as LogViewType } from './application/state/useSessionState';
@@ -28,6 +31,7 @@ import type { TerminalLayer as TerminalLayerComponent } from './components/Termi
 
 // Initialize fonts eagerly at app startup
 initializeFonts();
+initializeUIFonts();
 
 // Visibility container for VaultView - isolates isActive subscription
 const VaultViewContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => {
@@ -153,6 +157,8 @@ function App({ settings }: { settings: SettingsState }) {
   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[]>([]);
+  // Passphrase request queue for encrypted SSH keys
+  const [passphraseQueue, setPassphraseQueue] = useState<PassphraseRequest[]>([]);
 
   const {
     theme,
@@ -167,6 +173,9 @@ function App({ settings }: { settings: SettingsState }) {
     hotkeyScheme,
     keyBindings,
     isHotkeyRecording,
+    sessionLogsEnabled,
+    sessionLogsDir,
+    sessionLogsFormat,
   } = settings;
 
   const {
@@ -179,6 +188,7 @@ function App({ settings }: { settings: SettingsState }) {
     knownHosts,
     shellHistory,
     connectionLogs,
+    managedSources,
     updateHosts,
     updateKeys,
     updateIdentities,
@@ -186,6 +196,7 @@ function App({ settings }: { settings: SettingsState }) {
     updateSnippetPackages,
     updateCustomGroups,
     updateKnownHosts,
+    updateManagedSources,
     addShellHistoryEntry,
     addConnectionLog,
     updateConnectionLog,
@@ -237,6 +248,7 @@ function App({ settings }: { settings: SettingsState }) {
     logViews,
     openLogView,
     closeLogView,
+    copySession,
   } = useSessionState();
 
   // isMacClient is used for window controls styling
@@ -262,6 +274,12 @@ function App({ settings }: { settings: SettingsState }) {
     },
   });
 
+  const { clearAndRemoveSource, clearAndRemoveSources, unmanageSource } = useManagedSourceSync({
+    hosts,
+    managedSources,
+    onUpdateManagedSources: updateManagedSources,
+  });
+
   const handleSyncNowManual = useCallback(() => {
     return handleSyncNow({ trigger: 'manual' });
   }, [handleSyncNow]);
@@ -288,10 +306,16 @@ 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: keys.map((k) => ({ id: k.id, privateKey: k.privateKey })),
+    keys: portForwardingKeys,
   });
 
   // Keyboard-interactive authentication (2FA/MFA) event listener
@@ -337,6 +361,76 @@ function App({ settings }: { settings: SettingsState }) {
     setKeyboardInteractiveQueue(prev => prev.filter(r => r.requestId !== requestId));
   }, []);
 
+  // Passphrase request event listener for encrypted SSH keys
+  useEffect(() => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.onPassphraseRequest) return;
+
+    const unsubscribe = bridge.onPassphraseRequest((request) => {
+      console.log('[App] Passphrase request received:', request);
+      setPassphraseQueue(prev => [...prev, {
+        requestId: request.requestId,
+        keyPath: request.keyPath,
+        keyName: request.keyName,
+        hostname: request.hostname,
+      }]);
+    });
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, []);
+
+  // Handle passphrase submit
+  const handlePassphraseSubmit = useCallback((requestId: string, passphrase: string) => {
+    const bridge = netcattyBridge.get();
+    if (bridge?.respondPassphrase) {
+      void bridge.respondPassphrase(requestId, passphrase, false);
+    }
+    setPassphraseQueue(prev => prev.filter(r => r.requestId !== requestId));
+  }, []);
+
+  // Handle passphrase cancel
+  const handlePassphraseCancel = useCallback((requestId: string) => {
+    const bridge = netcattyBridge.get();
+    if (bridge?.respondPassphrase) {
+      // Cancel = stop the entire passphrase flow
+      void bridge.respondPassphrase(requestId, '', true);
+    }
+    setPassphraseQueue(prev => prev.filter(r => r.requestId !== requestId));
+  }, []);
+
+  // Handle passphrase skip (skip this key, continue with others)
+  const handlePassphraseSkip = useCallback((requestId: string) => {
+    const bridge = netcattyBridge.get();
+    if (bridge?.respondPassphraseSkip) {
+      // Skip = skip this key but continue asking for others
+      void bridge.respondPassphraseSkip(requestId);
+    } else if (bridge?.respondPassphrase) {
+      // Fallback for older API
+      void bridge.respondPassphrase(requestId, '', false);
+    }
+    setPassphraseQueue(prev => prev.filter(r => r.requestId !== requestId));
+  }, []);
+
+  // Handle passphrase timeout (request expired on backend)
+  useEffect(() => {
+    const bridge = netcattyBridge.get();
+    if (!bridge?.onPassphraseTimeout) return;
+
+    const unsubscribe = bridge.onPassphraseTimeout((event) => {
+      console.log('[App] Passphrase request timed out:', event.requestId);
+      // Remove from queue - the modal will close automatically
+      setPassphraseQueue(prev => prev.filter(r => r.requestId !== event.requestId));
+      // Show a toast notification to inform user
+      toast.error('Passphrase request timed out. Please try connecting again.');
+    });
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, []);
+
   // Debounce ref for moveFocus to prevent double-triggering when focus switches
   const lastMoveFocusTimeRef = useRef<number>(0);
   const MOVE_FOCUS_DEBOUNCE_MS = 200;
@@ -614,7 +708,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) => {
@@ -751,10 +845,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) => {
@@ -831,6 +947,7 @@ function App({ settings }: { settings: SettingsState }) {
         isMacClient={isMacClient}
         onCloseSession={closeSession}
         onRenameSession={startSessionRename}
+        onCopySession={copySession}
         onRenameWorkspace={startWorkspaceRename}
         onCloseWorkspace={closeWorkspace}
         onCloseLogView={closeLogView}
@@ -855,6 +972,7 @@ function App({ settings }: { settings: SettingsState }) {
             knownHosts={knownHosts}
             shellHistory={shellHistory}
             connectionLogs={connectionLogs}
+            managedSources={managedSources}
             sessions={sessions}
             onOpenSettings={handleOpenSettings}
             onOpenQuickSwitcher={handleOpenQuickSwitcher}
@@ -869,6 +987,10 @@ function App({ settings }: { settings: SettingsState }) {
             onUpdateSnippetPackages={updateSnippetPackages}
             onUpdateCustomGroups={updateCustomGroups}
             onUpdateKnownHosts={updateKnownHosts}
+            onUpdateManagedSources={updateManagedSources}
+            onClearAndRemoveManagedSource={clearAndRemoveSource}
+            onClearAndRemoveManagedSources={clearAndRemoveSources}
+            onUnmanageSource={unmanageSource}
             onConvertKnownHost={convertKnownHostToHost}
             onToggleConnectionLogSaved={toggleConnectionLogSaved}
             onDeleteConnectionLog={deleteConnectionLog}
@@ -1048,6 +1170,14 @@ function App({ settings }: { settings: SettingsState }) {
           {keyboardInteractiveQueue.length - 1} more pending
         </div>
       )}
+
+      {/* Global Passphrase Modal for encrypted SSH keys */}
+      <PassphraseModal
+        request={passphraseQueue[0] || null}
+        onSubmit={handlePassphraseSubmit}
+        onCancel={handlePassphraseCancel}
+        onSkip={handlePassphraseSkip}
+      />
     </div>
   );
 }

README.ja-JP.md

@@ -98,6 +98,8 @@
 
 ### 📁 SFTP
 - **デュアルペインファイルブラウザ** — ローカル ↔ リモート または リモート ↔ リモート
+- **Sudo 特権昇格** — sudo を使用して root 権限のファイルを閲覧および編集
+- **ドラッグ＆ドロップ** アップロードおよびダウンロード
 - **ドラッグ＆ドロップ**ファイル転送
 - **キュー管理**でバッチ転送
 - **進捗追跡**、転送速度表示
@@ -278,11 +280,11 @@ Netcatty は接続したホストの OS アイコンを自動的に検出・表
 
 [GitHub Releases](https://github.com/binaricat/Netcatty/releases/latest) からお使いのプラットフォームに対応した最新版をダウンロードしてください。
 
-| プラットフォーム | アーキテクチャ | ステータス |
-|------------------|----------------|------------|
-| **macOS** | Apple Silicon (M1/M2/M3) | ✅ サポート |
-| **macOS** | Intel | ✅ サポート |
-| **Windows** | x64 | ✅ サポート |
+| OS | サポート状況 |
+| :--- | :--- |
+| **macOS** | Universal (x64 / arm64) |
+| **Windows** | x64 / arm64 |
+| **Linux** | x64 / arm64 |
 
 または [GitHub Releases](https://github.com/binaricat/Netcatty/releases) ですべてのリリースを参照してください。
 

README.md

@@ -98,7 +98,8 @@
 
 ### 📁 SFTP
 - **Dual-pane file browser** — local ↔ remote or remote ↔ remote
-- **Drag & drop** file transfers
+- **Sudo Privilege Escalation** — Browse and edit root-owned files with sudo
+- **Drag & Drop** uploads and downloads
 - **Queue management** for batch transfers
 - **Progress tracking** with transfer speed
 
@@ -278,11 +279,11 @@ Netcatty automatically detects and displays OS icons for connected hosts:
 
 Download the latest release for your platform from [GitHub Releases](https://github.com/binaricat/Netcatty/releases/latest).
 
-| Platform | Architecture | Status |
-|----------|--------------|--------|
-| **macOS** | Apple Silicon (M1/M2/M3) | ✅ Supported |
-| **macOS** | Intel | ✅ Supported |
-| **Windows** | x64 | ✅ Supported |
+| OS | Support |
+| :--- | :--- |
+| **macOS** | Universal (x64 / arm64) |
+| **Windows** | x64 / arm64 |
+| **Linux** | x64 / arm64 |
 
 Or browse all releases at [GitHub Releases](https://github.com/binaricat/Netcatty/releases).
 

README.zh-CN.md

@@ -98,6 +98,8 @@
 
 ### 📁 SFTP
 - **双窗格文件浏览器** —— 本地 ↔ 远程 或 远程 ↔ 远程
+- **Sudo 提权支持** —— 使用 sudo 浏览和编辑 root 权限文件
+- **拖放操作** —— 支持上传和下载
 - **拖放传输** 文件
 - **队列管理** 批量传输
 - **进度跟踪** 显示传输速度
@@ -278,11 +280,11 @@ Netcatty 自动检测并显示已连接主机的操作系统图标：
 
 从 [GitHub Releases](https://github.com/binaricat/Netcatty/releases/latest) 下载适合您平台的最新版本。
 
-| 平台 | 架构 | 状态 |
-|------|------|------|
-| **macOS** | Apple Silicon (M1/M2/M3) | ✅ 支持 |
-| **macOS** | Intel | ✅ 支持 |
-| **Windows** | x64 | ✅ 支持 |
+| 操作系统 | 支持情况 |
+| :--- | :--- |
+| **macOS** | Universal (x64 / arm64) |
+| **Windows** | x64 / arm64 |
+| **Linux** | x64 / arm64 |
 
 或在 [GitHub Releases](https://github.com/binaricat/Netcatty/releases) 浏览所有版本。
 

application/i18n/locales/en.ts

@@ -39,6 +39,7 @@ const en: Messages = {
   'sort.za': 'Z-a',
   'sort.newest': 'Newest to oldest',
   'sort.oldest': 'Oldest to newest',
+  'sort.group': 'By group',
   'field.label': 'Label',
   'field.type': 'Type',
   'auth.keyType': 'Type {type}',
@@ -77,6 +78,24 @@ const en: Messages = {
   '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',
   'settings.application.reportProblem': 'Report a problem',
@@ -119,6 +138,8 @@ 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',
@@ -201,6 +222,18 @@ const en: Messages = {
   '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',
@@ -281,6 +314,11 @@ const en: Messages = {
   'vault.groups.createDialog.desc': 'Create a new group for organizing hosts.',
   'vault.groups.renameDialogTitle': 'Rename Group',
   'vault.groups.renameDialog.desc': 'Rename an existing group.',
+  'vault.groups.deleteDialogTitle': 'Delete Group',
+  'vault.groups.deleteDialog.desc': 'This will permanently delete the group and move all hosts to the root level.',
+  'vault.groups.deleteDialog.managedDesc': 'This is a managed SSH config group. Deleting it will also delete all hosts and unlink from the source file.',
+  'vault.groups.deleteDialog.deleteHosts': 'Also delete all hosts in this group',
+  'vault.groups.ungrouped': 'Ungrouped',
   'vault.groups.field.name': 'Group Name',
   'vault.groups.placeholder.example': 'e.g. Production',
   'vault.groups.parentLabel': 'Parent',
@@ -288,6 +326,9 @@ const en: Messages = {
   'vault.groups.errors.required': 'Group name is required.',
   'vault.groups.errors.invalidChars': "Group name cannot include '/' or '\\\\'.",
 
+  'vault.managedSource.unmanage': 'Unmanage',
+  'vault.managedSource.unmanageSuccess': 'Successfully unmanaged group',
+
   'vault.hosts.header.entries': '{count} entries',
   'vault.hosts.header.live': '{count} live',
 
@@ -296,10 +337,26 @@ const en: Messages = {
   'vault.hosts.connect': 'Connect',
   'vault.view.grid': 'Grid',
   'vault.view.list': 'List',
+  'vault.view.tree': 'Tree',
+  'vault.tree.expandAll': 'Expand All',
+  'vault.tree.collapseAll': 'Collapse All',
   'vault.hosts.newHost': 'New Host',
   'vault.hosts.newGroup': 'New Group',
   'vault.hosts.import': 'Import',
+  'vault.hosts.export': 'Export',
+  'vault.hosts.export.toast.success': 'Exported {count} hosts to CSV',
+  'vault.hosts.export.toast.successWithSkipped': 'Exported {count} hosts to CSV ({skipped} unsupported hosts skipped)',
+  'vault.hosts.export.toast.noHosts': 'No hosts to export',
   'vault.hosts.allHosts': 'All hosts',
+  'vault.hosts.copyCredentials': 'Copy Credentials',
+  'vault.hosts.copyCredentials.toast.success': 'Credentials copied to clipboard',
+  'vault.hosts.copyCredentials.toast.noPassword': 'No password saved for this host',
+  'vault.hosts.multiSelect': 'Multi-select',
+  'vault.hosts.selected': '{count} selected',
+  'vault.hosts.selectAll': 'Select All',
+  'vault.hosts.deselectAll': 'Deselect All',
+  'vault.hosts.deleteSelected': 'Delete ({count})',
+  'vault.hosts.deleteMultiple.success': 'Deleted {count} hosts',
 
   // Vault import
   'vault.import.title': 'Add data to your vault',
@@ -316,6 +373,18 @@ const en: Messages = {
   'vault.import.toast.summary':
     'Imported {count} hosts (skipped {skipped}, duplicates {duplicates}).',
   'vault.import.toast.firstIssue': 'First issue: {issue}',
+  'vault.import.sshConfig.chooseMode': 'Choose how to import your SSH config file.',
+  'vault.import.sshConfig.modeQuestion': 'How would you like to import?',
+  'vault.import.sshConfig.importOnly': 'Import Only',
+  'vault.import.sshConfig.importOnlyDesc': 'One-time import. Changes won\'t sync back to the file.',
+  'vault.import.sshConfig.managed': 'Managed Sync',
+  'vault.import.sshConfig.managedDesc': 'Keep in sync. Changes will be saved back to the file.',
+  'vault.import.sshConfig.managedGroup': 'ssh config',
+  'vault.import.sshConfig.managedSuccess': 'Imported {count} hosts. File is now managed.',
+  'vault.import.sshConfig.alreadyManaged': 'This file is already being managed.',
+  'vault.import.sshConfig.alreadyManagedDesc': 'This file is already managed under group "{group}". Remove the existing managed source first if you want to re-import.',
+  'vault.import.sshConfig.noFilePath': 'Cannot manage this file.',
+  'vault.import.sshConfig.noFilePathDesc': 'Unable to determine the file path. Managed sync requires access to the file system.',
 
   // Known Hosts
   'knownHosts.search.placeholder': 'Search known hosts...',
@@ -408,8 +477,12 @@ const en: Messages = {
   'sftp.columns.kind': 'Kind',
   'sftp.columns.actions': 'Actions',
   'sftp.emptyDirectory': 'Empty directory',
+  'sftp.nav.up': 'Go up',
+  'sftp.nav.home': 'Go to home',
+  'sftp.nav.refresh': 'Refresh',
   'sftp.upload': 'Upload',
   'sftp.uploadFiles': 'Upload files',
+  'sftp.uploadFolder': 'Upload folder',
   'sftp.dragDropToUpload': 'Drag and drop files here to upload',
   'sftp.retry': 'Retry',
   'sftp.context.open': 'Open',
@@ -431,6 +504,10 @@ 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',
@@ -441,6 +518,7 @@ const en: Messages = {
   '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',
@@ -490,6 +568,12 @@ const en: Messages = {
   'sftp.conflict.action.keepBoth': 'Keep Both',
   'sftp.conflict.action.replace': 'Replace',
 
+  // SFTP Upload Phases
+  'sftp.upload.phase.compressing': 'Compressing',
+  'sftp.upload.phase.uploading': 'Uploading',
+  'sftp.upload.phase.extracting': 'Extracting',
+  'sftp.upload.phase.compressed': 'Compressed',
+
   // SFTP File Opener
   'sftp.context.openWith': 'Open with...',
   'sftp.context.edit': 'Edit',
@@ -553,6 +637,12 @@ const en: Messages = {
 
   // SFTP Folder Upload Progress
   'sftp.upload.progress': 'Uploading {current} of {total} files...',
+  'sftp.upload.uploading': 'Uploading...',
+  'sftp.upload.compressing': 'Compressing...',
+  'sftp.upload.extracting': 'Extracting...',
+  'sftp.upload.scanning': 'Scanning files...',
+  'sftp.upload.completed': 'Completed',
+  'sftp.upload.compressed': 'Compressed Transfer',
   'sftp.upload.currentFile': 'Current: {fileName}',
   'sftp.upload.cancelled': 'Upload cancelled',
   'sftp.upload.cancel': 'Cancel',
@@ -572,6 +662,12 @@ const en: Messages = {
   'settings.sftp.showHiddenFiles.enable': 'Show hidden files',
   'settings.sftp.showHiddenFiles.enableDesc': 'Display Windows hidden files when browsing local filesystem',
 
+  // Settings > SFTP Compressed Upload
+  'settings.sftp.compressedUpload': 'Folder Compression Transfer',
+  'settings.sftp.compressedUpload.desc': 'Compress folders before uploading to significantly reduce transfer time.',
+  'settings.sftp.compressedUpload.enable': 'Enable folder compression',
+  'settings.sftp.compressedUpload.enableDesc': 'Automatically compress folders using tar before transfer. Requires tar support on the server. Falls back to regular transfer if not available.',
+
   // Quick Switcher
   'qs.search.placeholder': 'Search hosts or tabs',
   'qs.recentConnections': 'Recent connections',
@@ -614,6 +710,8 @@ const en: Messages = {
   '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',
@@ -622,6 +720,9 @@ const en: Messages = {
   'hostDetails.section.mosh': 'Mosh',
   'hostDetails.username.placeholder': 'Username',
   'hostDetails.password.placeholder': 'Password',
+  'hostDetails.password.show': 'Show password',
+  'hostDetails.password.hide': 'Hide password',
+  'hostDetails.password.save': 'Save password',
   'hostDetails.identity.suggestions': 'Identities',
   'hostDetails.identity.missing': 'Identity not found',
   'hostDetails.credential.keyCertificate': 'Key, Certificate',
@@ -726,7 +827,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',
@@ -737,6 +838,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',
@@ -754,6 +856,27 @@ 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.dragDrop.localTitle': 'Drop to Insert Paths',
+  'terminal.dragDrop.localMessage': 'File paths will be inserted into the terminal',
+  'terminal.dragDrop.remoteTitle': 'Drop to Upload Files',
+  'terminal.dragDrop.remoteMessage': 'Files will be uploaded via SFTP',
+  'terminal.dragDrop.notConnected': 'Cannot drop files - terminal is not connected',
+  'terminal.dragDrop.errorTitle': 'Drop Error',
+  'terminal.dragDrop.errorMessage': 'Failed to process dropped files',
   'terminal.search.placeholder': 'Search...',
   'terminal.search.noResults': 'No results',
   'terminal.search.prevMatch': 'Previous match (Shift+Enter)',
@@ -784,6 +907,11 @@ const en: Messages = {
   'terminal.connection.chainOf': 'Chain {current} of {total}',
   'terminal.connection.showLogs': 'Show logs',
   'terminal.connection.hideLogs': 'Hide logs',
+  'terminal.connection.protocol.ssh': 'SSH',
+  'terminal.connection.protocol.telnet': 'Telnet',
+  'terminal.connection.protocol.mosh': 'Mosh',
+  'terminal.connection.protocol.serial': 'Serial',
+  'terminal.connection.protocol.local': 'Local Shell',
   'terminal.themeModal.title': 'Terminal Appearance',
   'terminal.themeModal.tab.theme': 'Theme',
   'terminal.themeModal.tab.font': 'Font',
@@ -1045,6 +1173,7 @@ const en: Messages = {
   'tabs.closeLogViewAria': 'Close log view',
   'tabs.logPrefix': 'Log:',
   'tabs.logLocal': 'Local',
+  'tabs.copyTab': 'Copy Tab',
   'keychain.edit.labelRequired': 'Label *',
   'keychain.edit.keyLabelPlaceholder': 'Key label',
   'keychain.edit.privateKeyRequired': 'Private key *',
@@ -1096,6 +1225,14 @@ const en: Messages = {
   'snippets.packageDialog.placeholder': 'e.g. ops/maintenance',
   'snippets.packageDialog.hint': 'Use "/" to create nested packages.',
 
+  // Snippets Rename Dialog
+  'snippets.renameDialog.title': 'Rename Package',
+  'snippets.renameDialog.currentPath': 'Current path: {path}',
+  'snippets.renameDialog.placeholder': 'Enter new name',
+  'snippets.renameDialog.error.empty': 'Package name cannot be empty',
+  'snippets.renameDialog.error.duplicate': 'A package with this name already exists',
+  'snippets.renameDialog.error.invalidChars': 'Package name can only contain letters, numbers, hyphens, and underscores',
+
   // Serial Port
   'serial.button': 'Serial',
   'serial.modal.title': 'Connect to Serial Port',
@@ -1150,6 +1287,16 @@ const en: Messages = {
   'keyboard.interactive.fillSaved': 'Fill with saved password',
   'keyboard.interactive.useSaved': 'Use saved',
   'keyboard.interactive.useSavedPassword': 'Use saved password',
+
+  // Passphrase Modal for encrypted SSH keys
+  'passphrase.title': 'SSH Key Passphrase',
+  'passphrase.desc': 'Enter the passphrase for {keyName}',
+  'passphrase.descWithHost': 'Enter the passphrase for {keyName} to connect to {hostname}',
+  'passphrase.label': 'Passphrase',
+  'passphrase.keyPath': 'Key',
+  'passphrase.unlock': 'Unlock',
+  'passphrase.unlocking': 'Unlocking...',
+  'passphrase.skip': 'Skip',
 };
 
 export default en;

application/i18n/locales/zh-CN.ts

@@ -27,6 +27,7 @@ const zhCN: Messages = {
   'sort.za': 'Z-a',
   'sort.newest': '从新到旧',
   'sort.oldest': '从旧到新',
+  'sort.group': '按分组',
   'field.label': 'Label',
   'field.type': '类型',
   'auth.keyType': '类型 {type}',
@@ -65,6 +66,24 @@ const zhCN: Messages = {
   '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': '检查更新',
   'settings.application.reportProblem': '反馈问题',
@@ -106,6 +125,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': '新建主机',
@@ -164,6 +185,11 @@ const zhCN: Messages = {
   'vault.groups.createDialog.desc': '创建新的分组用于组织主机。',
   'vault.groups.renameDialogTitle': '重命名分组',
   'vault.groups.renameDialog.desc': '重命名已有分组。',
+  'vault.groups.deleteDialogTitle': '删除分组',
+  'vault.groups.deleteDialog.desc': '这将永久删除该分组并将所有主机移动到根级别。',
+  'vault.groups.deleteDialog.managedDesc': '这是一个托管的 SSH config 分组。删除后将同时删除所有主机并断开与源文件的连接。',
+  'vault.groups.deleteDialog.deleteHosts': '同时删除该分组下的所有主机',
+  'vault.groups.ungrouped': '未分组',
   'vault.groups.field.name': '分组名称',
   'vault.groups.placeholder.example': '例如：Production',
   'vault.groups.parentLabel': '父级',
@@ -171,6 +197,9 @@ const zhCN: Messages = {
   'vault.groups.errors.required': '分组名称不能为空。',
   'vault.groups.errors.invalidChars': "分组名称不能包含 '/' 或 '\\\\'.",
 
+  'vault.managedSource.unmanage': '取消托管',
+  'vault.managedSource.unmanageSuccess': '已取消托管分组',
+
   'vault.hosts.header.entries': '{count} 条',
   'vault.hosts.header.live': '{count} 个在线',
 
@@ -179,10 +208,26 @@ const zhCN: Messages = {
   'vault.hosts.connect': '连接',
   'vault.view.grid': '网格',
   'vault.view.list': '列表',
+  'vault.view.tree': '树形',
+  'vault.tree.expandAll': '展开全部',
+  'vault.tree.collapseAll': '折叠全部',
   'vault.hosts.newHost': '新建主机',
   'vault.hosts.newGroup': '新建分组',
   'vault.hosts.import': '导入',
+  'vault.hosts.export': '导出',
+  'vault.hosts.export.toast.success': '已导出 {count} 个主机到 CSV',
+  'vault.hosts.export.toast.successWithSkipped': '已导出 {count} 个主机到 CSV（跳过 {skipped} 个不支持的主机）',
+  'vault.hosts.export.toast.noHosts': '没有主机可导出',
   'vault.hosts.allHosts': '全部主机',
+  'vault.hosts.copyCredentials': '复制账密信息',
+  'vault.hosts.copyCredentials.toast.success': '账密信息已复制到剪贴板',
+  'vault.hosts.copyCredentials.toast.noPassword': '该主机未保存密码',
+  'vault.hosts.multiSelect': '多选',
+  'vault.hosts.selected': '已选择 {count} 项',
+  'vault.hosts.selectAll': '全选',
+  'vault.hosts.deselectAll': '取消全选',
+  'vault.hosts.deleteSelected': '删除 ({count})',
+  'vault.hosts.deleteMultiple.success': '已删除 {count} 个主机',
 
   // Vault import
   'vault.import.title': '添加数据到你的 Vault',
@@ -197,6 +242,18 @@ const zhCN: Messages = {
   'vault.import.toast.noNewHosts': '从 {format} 没有导入到新的主机。',
   'vault.import.toast.summary': '已导入 {count} 个主机（跳过 {skipped}，重复 {duplicates}）。',
   'vault.import.toast.firstIssue': '首个问题：{issue}',
+  'vault.import.sshConfig.chooseMode': '选择如何导入你的 SSH config 文件。',
+  'vault.import.sshConfig.modeQuestion': '你希望如何导入？',
+  'vault.import.sshConfig.importOnly': '仅导入',
+  'vault.import.sshConfig.importOnlyDesc': '一次性导入，修改不会同步回文件。',
+  'vault.import.sshConfig.managed': '托管同步',
+  'vault.import.sshConfig.managedDesc': '保持同步，修改会自动保存回文件。',
+  'vault.import.sshConfig.managedGroup': 'ssh config',
+  'vault.import.sshConfig.managedSuccess': '已导入 {count} 个主机，文件已托管。',
+  'vault.import.sshConfig.alreadyManaged': '该文件已被托管。',
+  'vault.import.sshConfig.alreadyManagedDesc': '该文件已在分组 "{group}" 下托管。如需重新导入，请先移除现有的托管源。',
+  'vault.import.sshConfig.noFilePath': '无法托管此文件。',
+  'vault.import.sshConfig.noFilePathDesc': '无法确定文件路径。托管同步需要访问文件系统。',
 
   // Known Hosts
   'knownHosts.search.placeholder': '搜索已知主机...',
@@ -273,8 +330,12 @@ const zhCN: Messages = {
   'sftp.columns.kind': '类型',
   'sftp.columns.actions': '操作',
   'sftp.emptyDirectory': '空目录',
+  'sftp.nav.up': '返回上层',
+  'sftp.nav.home': '返回主目录',
+  'sftp.nav.refresh': '刷新',
   'sftp.upload': '上传',
   'sftp.uploadFiles': '上传文件',
+  'sftp.uploadFolder': '上传文件夹',
   'sftp.dragDropToUpload': '拖拽文件到这里上传',
   'sftp.retry': '重试',
   'sftp.context.open': '打开',
@@ -296,6 +357,10 @@ 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': '输入文件夹名称',
@@ -306,6 +371,7 @@ const zhCN: Messages = {
   'sftp.rename.newName': '新名称',
   'sftp.rename.placeholder': '输入新名称',
   'sftp.confirm.deleteOne': '删除 "{name}"？',
+  'sftp.deleteConfirm.single': '删除 "{name}"？',
   'sftp.deleteConfirm.title': '删除 {count} 个项目？',
   'sftp.deleteConfirm.desc': '此操作不可撤销，将删除以下内容：',
   'sftp.error.loadFailed': '加载目录失败',
@@ -374,6 +440,8 @@ const zhCN: Messages = {
   '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': '凭据',
@@ -382,6 +450,9 @@ const zhCN: Messages = {
   'hostDetails.section.mosh': 'Mosh',
   'hostDetails.username.placeholder': '用户名',
   'hostDetails.password.placeholder': '密码',
+  'hostDetails.password.show': '显示密码',
+  'hostDetails.password.hide': '隐藏密码',
+  'hostDetails.password.save': '保存密码',
   'hostDetails.identity.suggestions': '身份',
   'hostDetails.identity.missing': '身份不存在',
   'hostDetails.credential.keyCertificate': '密钥 / 证书',
@@ -457,7 +528,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': '收藏',
@@ -468,6 +539,7 @@ const zhCN: Messages = {
   'logView.customizeAppearance': '自定义外观',
   'logView.appearance': '外观',
   'logView.readOnly': '只读',
+  'logView.export': '导出',
 
   // Terminal toolbar / search / context menu / auth
   'terminal.toolbar.openSftp': '打开 SFTP',
@@ -485,6 +557,27 @@ 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.dragDrop.localTitle': '拖放以插入路径',
+  'terminal.dragDrop.localMessage': '文件路径将被插入到终端',
+  'terminal.dragDrop.remoteTitle': '拖放以上传文件',
+  'terminal.dragDrop.remoteMessage': '文件将通过 SFTP 上传',
+  'terminal.dragDrop.notConnected': '无法拖放文件 - 终端未连接',
+  'terminal.dragDrop.errorTitle': '拖放错误',
+  'terminal.dragDrop.errorMessage': '处理拖放文件失败',
   'terminal.search.placeholder': '搜索…',
   'terminal.search.noResults': '无结果',
   'terminal.search.prevMatch': '上一个匹配 (Shift+Enter)',
@@ -516,6 +609,11 @@ const zhCN: Messages = {
   'terminal.connection.chainOf': 'Chain {current} / {total}',
   'terminal.connection.showLogs': '显示日志',
   'terminal.connection.hideLogs': '隐藏日志',
+  'terminal.connection.protocol.ssh': 'SSH',
+  'terminal.connection.protocol.telnet': 'Telnet',
+  'terminal.connection.protocol.mosh': 'Mosh',
+  'terminal.connection.protocol.serial': '串口',
+  'terminal.connection.protocol.local': '本地终端',
   'terminal.themeModal.title': 'Terminal 外观',
   'terminal.themeModal.tab.theme': '主题',
   'terminal.themeModal.tab.font': '字体',
@@ -736,6 +834,12 @@ const zhCN: Messages = {
   'sftp.conflict.action.keepBoth': '保留两者',
   'sftp.conflict.action.replace': '替换',
 
+  // SFTP Upload Phases
+  'sftp.upload.phase.compressing': '正在压缩',
+  'sftp.upload.phase.uploading': '正在上传',
+  'sftp.upload.phase.extracting': '正在解压',
+  'sftp.upload.phase.compressed': '压缩传输',
+
   // SFTP File Opener
   'sftp.context.openWith': '打开方式...',
   'sftp.context.edit': '编辑',
@@ -799,6 +903,12 @@ const zhCN: Messages = {
 
   // SFTP Folder Upload Progress
   'sftp.upload.progress': '正在上传 {current}/{total} 个文件...',
+  'sftp.upload.uploading': '正在上传...',
+  'sftp.upload.compressing': '正在压缩...',
+  'sftp.upload.extracting': '正在解压...',
+  'sftp.upload.scanning': '正在扫描文件...',
+  'sftp.upload.completed': '已完成',
+  'sftp.upload.compressed': '压缩传输',
   'sftp.upload.currentFile': '当前: {fileName}',
   'sftp.upload.cancelled': '上传已取消',
   'sftp.upload.cancel': '取消',
@@ -818,6 +928,12 @@ const zhCN: Messages = {
   'settings.sftp.showHiddenFiles.enable': '显示隐藏文件',
   'settings.sftp.showHiddenFiles.enableDesc': '浏览本地文件系统时显示 Windows 隐藏文件',
 
+  // Settings > SFTP Compressed Upload
+  'settings.sftp.compressedUpload': '文件夹压缩传输',
+  'settings.sftp.compressedUpload.desc': '上传前压缩文件夹，可大幅减少传输时间。',
+  'settings.sftp.compressedUpload.enable': '启用文件夹压缩',
+  'settings.sftp.compressedUpload.enableDesc': '自动使用 tar 压缩文件夹后再传输。需要服务器支持 tar 命令，不支持时自动回退到普通传输。',
+
   // Settings > Terminal
   'settings.terminal.section.theme': '终端主题',
   'settings.terminal.themeModal.title': '选择主题',
@@ -893,6 +1009,18 @@ const zhCN: Messages = {
   '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': '快捷键方案',
@@ -1034,6 +1162,7 @@ const zhCN: Messages = {
   'tabs.closeLogViewAria': '关闭日志视图',
   'tabs.logPrefix': '日志：',
   'tabs.logLocal': '本地',
+  'tabs.copyTab': '复制标签页',
   'keychain.edit.labelRequired': 'Label *',
   'keychain.edit.keyLabelPlaceholder': '密钥 Label',
   'keychain.edit.privateKeyRequired': '私钥 *',
@@ -1085,6 +1214,14 @@ const zhCN: Messages = {
   'snippets.packageDialog.placeholder': '例如：ops/maintenance',
   'snippets.packageDialog.hint': '使用 "/" 创建嵌套代码包。',
 
+  // Snippets Rename Dialog
+  'snippets.renameDialog.title': '重命名代码包',
+  'snippets.renameDialog.currentPath': '当前路径：{path}',
+  'snippets.renameDialog.placeholder': '输入新名称',
+  'snippets.renameDialog.error.empty': '代码包名称不能为空',
+  'snippets.renameDialog.error.duplicate': '已存在同名的代码包',
+  'snippets.renameDialog.error.invalidChars': '代码包名称只能包含字母、数字、连字符和下划线',
+
   // Serial Port
   'serial.button': '串口',
   'serial.modal.title': '连接串口',
@@ -1139,6 +1276,16 @@ const zhCN: Messages = {
   'keyboard.interactive.fillSaved': '填入已保存的密码',
   'keyboard.interactive.useSaved': '使用已保存',
   'keyboard.interactive.useSavedPassword': '使用已保存的密码',
+
+  // Passphrase Modal for encrypted SSH keys
+  'passphrase.title': 'SSH 密钥密码',
+  'passphrase.desc': '请输入 {keyName} 的密码',
+  'passphrase.descWithHost': '请输入 {keyName} 的密码以连接到 {hostname}',
+  'passphrase.label': '密码',
+  'passphrase.keyPath': '密钥',
+  'passphrase.unlock': '解锁',
+  'passphrase.unlocking': '解锁中...',
+  'passphrase.skip': '跳过',
 };
 
 export default zhCN;

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,63 @@
+import { useCallback } from "react";
+import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
+import type { SftpFileEntry, SftpFilenameEncoding } from "../../../domain/models";
+import { buildMockLocalFiles } from "./mockLocalFiles";
+import { formatFileSize, formatDate } 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;
+        const lastModified = new Date(f.lastModified).getTime();
+        return {
+          name: f.name,
+          type: f.type as "file" | "directory" | "symlink",
+          size,
+          sizeFormatted: formatFileSize(size),
+          lastModified,
+          lastModifiedFormatted: formatDate(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;
+        const lastModified = new Date(f.lastModified).getTime();
+        return {
+          name: f.name,
+          type: f.type as "file" | "directory" | "symlink",
+          size,
+          sizeFormatted: formatFileSize(size),
+          lastModified,
+          lastModifiedFormatted: formatDate(lastModified),
+          linkTarget: f.linkTarget as "file" | "directory" | null | undefined,
+        };
+      });
+    },
+    [],
+  );
+
+  return {
+    listLocalFiles,
+    listRemoteFiles,
+  };
+};

application/state/sftp/useSftpExternalOperations.ts

@@ -0,0 +1,449 @@
+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,
+      // Stream transfer for large files (avoids loading into memory)
+      startStreamTransfer: bridge?.startStreamTransfer
+        ? async (options, onProgress, onComplete, onError) => {
+            const b = netcattyBridge.get();
+            if (!b?.startStreamTransfer) {
+              return { transferId: options.transferId, error: 'Stream transfer not available' };
+            }
+            try {
+              const result = await b.startStreamTransfer(options, onProgress, onComplete, onError);
+              return result;
+            } catch (error) {
+              return {
+                transferId: options.transferId,
+                error: error instanceof Error ? error.message : String(error),
+              };
+            }
+          }
+        : undefined,
+      cancelTransfer: bridge?.cancelTransfer,
+    };
+  }, []);
+
+  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,90 @@
+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);
+  if (isNaN(date.getTime())) return "--";
+  const pad = (n: number) => n.toString().padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+};
+
+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/useManagedSourceSync.ts

@@ -0,0 +1,358 @@
+import { useCallback, useEffect, useRef } from "react";
+import { Host, ManagedSource } from "../../domain/models";
+import {
+  serializeHostsToSshConfig,
+  mergeWithExistingSshConfig,
+} from "../../domain/sshConfigSerializer";
+import { netcattyBridge } from "../../infrastructure/services/netcattyBridge";
+
+const MANAGED_BLOCK_BEGIN = "# BEGIN NETCATTY MANAGED - DO NOT EDIT THIS BLOCK";
+const MANAGED_BLOCK_END = "# END NETCATTY MANAGED";
+
+export interface UseManagedSourceSyncOptions {
+  hosts: Host[];
+  managedSources: ManagedSource[];
+  onUpdateManagedSources: (sources: ManagedSource[]) => void;
+}
+
+export const useManagedSourceSync = ({
+  hosts,
+  managedSources,
+  onUpdateManagedSources,
+}: UseManagedSourceSyncOptions) => {
+  const previousHostsRef = useRef<Host[]>([]);
+  const syncInProgressRef = useRef(false);
+  // Keep a ref to the latest managedSources to avoid stale closure issues
+  const managedSourcesRef = useRef(managedSources);
+  managedSourcesRef.current = managedSources;
+
+  const getManagedHostsForSource = useCallback(
+    (sourceId: string) => {
+      return hosts.filter((h) => h.managedSourceId === sourceId);
+    },
+    [hosts],
+  );
+
+  const readExistingFileContent = useCallback(
+    async (filePath: string): Promise<string | null> => {
+      const bridge = netcattyBridge.get();
+      if (!bridge?.readLocalFile) {
+        return null;
+      }
+      try {
+        const buffer = await bridge.readLocalFile(filePath);
+        const decoder = new TextDecoder();
+        return decoder.decode(buffer);
+      } catch {
+        // File might not exist yet
+        return null;
+      }
+    },
+    [],
+  );
+
+  const mergeWithExistingContent = useCallback(
+    (
+      existingContent: string | null,
+      managedHosts: Host[],
+      allHosts: Host[],
+    ): string => {
+      // Serialize the managed hosts
+      const managedContent = serializeHostsToSshConfig(managedHosts, allHosts);
+
+      if (!existingContent) {
+        // No existing file, just wrap the managed content
+        return `${MANAGED_BLOCK_BEGIN}\n${managedContent}${MANAGED_BLOCK_END}\n`;
+      }
+
+      const beginIndex = existingContent.indexOf(MANAGED_BLOCK_BEGIN);
+      const endIndex = existingContent.indexOf(MANAGED_BLOCK_END);
+
+      if (beginIndex === -1 || endIndex === -1 || endIndex < beginIndex) {
+        // No existing managed block - need to remove duplicate Host entries
+        // Build a set of hostnames/aliases that will be managed
+        const managedHostnameSet = new Set<string>();
+        for (const host of managedHosts) {
+          if (!host.protocol || host.protocol === "ssh") {
+            // Add both hostname and sanitized label (alias) for matching
+            managedHostnameSet.add(host.hostname.toLowerCase());
+            if (host.label) {
+              managedHostnameSet.add(host.label.replace(/\s/g, "").toLowerCase());
+            }
+          }
+        }
+
+        // Use mergeWithExistingSshConfig to filter out existing Host blocks
+        // that match our managed hosts, keeping preserved content outside markers
+        const mergedContent = mergeWithExistingSshConfig(
+          existingContent,
+          managedHosts,
+          managedHostnameSet,
+          allHosts,
+        );
+        return mergedContent;
+      }
+
+      // Replace the existing managed block
+      const before = existingContent.substring(0, beginIndex);
+      const after = existingContent.substring(endIndex + MANAGED_BLOCK_END.length);
+      return `${before}${MANAGED_BLOCK_BEGIN}\n${managedContent}${MANAGED_BLOCK_END}${after}`;
+    },
+    [],
+  );
+
+  const writeSshConfigToFile = useCallback(
+    async (source: ManagedSource, managedHosts: Host[]) => {
+      console.log(`[ManagedSourceSync] writeSshConfigToFile called for ${source.groupName}, hosts:`, managedHosts.length);
+
+      const bridge = netcattyBridge.get();
+      if (!bridge?.writeLocalFile) {
+        console.warn("[ManagedSourceSync] writeLocalFile not available");
+        return false;
+      }
+
+      try {
+        // Read existing file content to preserve non-managed parts
+        const existingContent = await readExistingFileContent(source.filePath);
+
+        // Merge with existing content, preserving non-managed parts and removing duplicates
+        const finalContent = mergeWithExistingContent(
+          existingContent,
+          managedHosts,
+          hosts,
+        );
+        console.log(`[ManagedSourceSync] Final content (${finalContent.length} chars)`);
+
+        const encoder = new TextEncoder();
+        const buffer = encoder.encode(finalContent);
+        console.log(`[ManagedSourceSync] Writing to ${source.filePath}`);
+
+        await bridge.writeLocalFile(source.filePath, buffer.buffer as ArrayBuffer);
+        console.log(`[ManagedSourceSync] Write successful`);
+        return true;
+      } catch (err) {
+        console.error("[ManagedSourceSync] Failed to write SSH config:", err);
+        return false;
+      }
+    },
+    [readExistingFileContent, mergeWithExistingContent, hosts],
+  );
+
+  const syncManagedSource = useCallback(
+    async (source: ManagedSource): Promise<{ sourceId: string; success: boolean }> => {
+      const managedHosts = getManagedHostsForSource(source.id);
+      const success = await writeSshConfigToFile(source, managedHosts);
+      return { sourceId: source.id, success };
+    },
+    [getManagedHostsForSource, writeSshConfigToFile],
+  );
+
+  const unmanageSource = useCallback(
+    (sourceId: string) => {
+      const updatedSources = managedSourcesRef.current.filter((s) => s.id !== sourceId);
+      onUpdateManagedSources(updatedSources);
+    },
+    [onUpdateManagedSources],
+  );
+
+  // Clear the managed block in the SSH config file and then remove the source
+  // This should be called before deleting a managed group to avoid stale entries
+  const clearAndRemoveSource = useCallback(
+    async (source: ManagedSource) => {
+      console.log(`[ManagedSourceSync] Clearing managed block for ${source.groupName}`);
+      // Write empty hosts list to clear the managed block
+      const success = await writeSshConfigToFile(source, []);
+      if (success) {
+        console.log(`[ManagedSourceSync] Managed block cleared, removing source`);
+      }
+      // Remove the source regardless of write success
+      const updatedSources = managedSourcesRef.current.filter((s) => s.id !== source.id);
+      onUpdateManagedSources(updatedSources);
+      return success;
+    },
+    [onUpdateManagedSources, writeSshConfigToFile],
+  );
+
+  // Clear and remove multiple sources atomically to avoid race conditions
+  // when multiple sources are removed concurrently
+  const clearAndRemoveSources = useCallback(
+    async (sources: ManagedSource[]) => {
+      if (sources.length === 0) return;
+
+      console.log(`[ManagedSourceSync] Clearing ${sources.length} managed blocks`);
+
+      // Clear all files in parallel
+      const results = await Promise.all(
+        sources.map(async (source) => {
+          const success = await writeSshConfigToFile(source, []);
+          return { sourceId: source.id, success };
+        })
+      );
+
+      const successCount = results.filter(r => r.success).length;
+      console.log(`[ManagedSourceSync] Cleared ${successCount}/${sources.length} managed blocks`);
+
+      // Remove all sources atomically in a single update
+      const sourceIdsToRemove = new Set(sources.map(s => s.id));
+      const updatedSources = managedSourcesRef.current.filter(
+        (s) => !sourceIdsToRemove.has(s.id)
+      );
+      onUpdateManagedSources(updatedSources);
+    },
+    [onUpdateManagedSources, writeSshConfigToFile],
+  );
+
+  const pendingSyncRef = useRef(false);
+  const checkAndSyncRef = useRef<() => void>(() => {});
+
+  const checkAndSync = useCallback(() => {
+    if (managedSources.length === 0) {
+      // Still update previousHostsRef so we have a baseline when sources are added
+      previousHostsRef.current = hosts;
+      return;
+    }
+
+    const prevHosts = previousHostsRef.current;
+    previousHostsRef.current = hosts;
+
+    // On initial sync (prevHosts empty), sync all sources that have managed hosts
+    const isInitialSync = prevHosts.length === 0;
+
+    const changedSourceIds = new Set<string>();
+
+    if (isInitialSync) {
+      // Initial sync: sync all sources that have hosts
+      for (const source of managedSources) {
+        const currManaged = hosts.filter((h) => h.managedSourceId === source.id);
+        if (currManaged.length > 0) {
+          changedSourceIds.add(source.id);
+        }
+      }
+    } else {
+      // Build maps for all hosts (for jump host lookup)
+      const prevHostMap = new Map<string, Host>(prevHosts.map((h) => [h.id, h]));
+      const currHostMap = new Map<string, Host>(hosts.map((h) => [h.id, h]));
+
+      // Helper to check if a host's SSH-relevant fields changed
+      const hostChanged = (prevHost: Host | undefined, currHost: Host | undefined): boolean => {
+        if (!prevHost || !currHost) return prevHost !== currHost;
+        return (
+          prevHost.hostname !== currHost.hostname ||
+          prevHost.port !== currHost.port ||
+          prevHost.username !== currHost.username ||
+          prevHost.label !== currHost.label
+        );
+      };
+
+      for (const source of managedSources) {
+        const prevManaged = prevHosts.filter((h) => h.managedSourceId === source.id);
+        const currManaged = hosts.filter((h) => h.managedSourceId === source.id);
+
+        console.log(`[ManagedSourceSync] Source ${source.groupName}: prev=${prevManaged.length}, curr=${currManaged.length}`);
+
+        if (prevManaged.length !== currManaged.length) {
+          changedSourceIds.add(source.id);
+          continue;
+        }
+
+        const prevManagedMap = new Map<string, Host>(prevManaged.map((h) => [h.id, h]));
+        let sourceChanged = false;
+
+        for (const curr of currManaged) {
+          const prev = prevManagedMap.get(curr.id);
+          if (!prev) {
+            sourceChanged = true;
+            break;
+          }
+          // Compare hostChain arrays for ProxyJump changes
+          const prevChain = prev.hostChain?.hostIds || [];
+          const currChain = curr.hostChain?.hostIds || [];
+          const chainChanged =
+            prevChain.length !== currChain.length ||
+            prevChain.some((id, i) => id !== currChain[i]);
+
+          const hasChanged =
+            prev.hostname !== curr.hostname ||
+            prev.port !== curr.port ||
+            prev.username !== curr.username ||
+            prev.label !== curr.label ||
+            prev.group !== curr.group ||
+            prev.protocol !== curr.protocol ||
+            chainChanged;
+          if (hasChanged) {
+            sourceChanged = true;
+            break;
+          }
+
+          // Check if any referenced jump hosts changed (even if outside this managed source)
+          for (const jumpHostId of currChain) {
+            const prevJumpHost = prevHostMap.get(jumpHostId);
+            const currJumpHost = currHostMap.get(jumpHostId);
+            if (hostChanged(prevJumpHost, currJumpHost)) {
+              sourceChanged = true;
+              break;
+            }
+          }
+          if (sourceChanged) break;
+        }
+
+        if (sourceChanged) {
+          changedSourceIds.add(source.id);
+        }
+      }
+    }
+
+    if (changedSourceIds.size > 0) {
+      console.log(`[ManagedSourceSync] Syncing sources:`, Array.from(changedSourceIds));
+      syncInProgressRef.current = true;
+
+      Promise.all(
+        managedSources
+          .filter((s) => changedSourceIds.has(s.id))
+          .map(syncManagedSource),
+      ).then((results) => {
+        // Batch update lastSyncedAt for all successful syncs to avoid race conditions
+        const successfulSourceIds = new Set(
+          results.filter(r => r.success).map(r => r.sourceId)
+        );
+
+        if (successfulSourceIds.size > 0) {
+          const currentSources = managedSourcesRef.current;
+          const now = Date.now();
+          const updatedSources = currentSources.map((s) =>
+            successfulSourceIds.has(s.id) ? { ...s, lastSyncedAt: now } : s,
+          );
+          onUpdateManagedSources(updatedSources);
+        }
+      }).finally(() => {
+        syncInProgressRef.current = false;
+        // Check if there were changes during sync that need to be processed
+        // Use ref to get the latest checkAndSync to avoid stale closure
+        if (pendingSyncRef.current) {
+          pendingSyncRef.current = false;
+          checkAndSyncRef.current();
+        }
+      });
+    }
+  }, [hosts, managedSources, syncManagedSource, onUpdateManagedSources]);
+
+  // Keep ref updated with the latest checkAndSync
+  checkAndSyncRef.current = checkAndSync;
+
+  useEffect(() => {
+    if (syncInProgressRef.current) {
+      // Mark that we need to re-sync after current sync completes
+      pendingSyncRef.current = true;
+      return;
+    }
+    checkAndSync();
+  }, [hosts, managedSources, checkAndSync]);
+
+  return {
+    syncManagedSource,
+    unmanageSource,
+    clearAndRemoveSource,
+    clearAndRemoveSources,
+    getManagedHostsForSource,
+  };
+};

application/state/usePortForwardingAutoStart.ts

@@ -76,10 +76,14 @@ export const usePortForwardingAutoStart = ({
     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,
@@ -95,8 +99,6 @@ export const usePortForwardingAutoStart = ({
       });
 
       if (autoStartRules.length === 0) return;
-
-      autoStartExecutedRef.current = true;
       logger.info(`[PortForwardingAutoStart] Starting ${autoStartRules.length} auto-start rules`);
 
       // Start each auto-start rule

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,
@@ -76,6 +76,9 @@ 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);
@@ -84,9 +87,12 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
   // Load rules from storage on mount and sync with backend
   useEffect(() => {
     const loadAndSync = async () => {
-      // First, sync with backend to get any active tunnels
-      await syncWithBackend();
-      
+      // 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,
       );

application/state/useSessionState.ts

@@ -547,6 +547,31 @@ export const useSessionState = () => {
     });
   }, [setActiveTabId]);
 
+  // Copy a session - creates a new session with the same host connection
+  const copySession = useCallback((sessionId: string) => {
+    setSessions(prevSessions => {
+      const session = prevSessions.find(s => s.id === sessionId);
+      if (!session) return prevSessions;
+
+      // Create a new session with the same connection info
+      const newSession: TerminalSession = {
+        id: crypto.randomUUID(),
+        hostId: session.hostId,
+        hostLabel: session.hostLabel,
+        hostname: session.hostname,
+        username: session.username,
+        status: 'connecting',
+        protocol: session.protocol,
+        port: session.port,
+        moshEnabled: session.moshEnabled,
+        serialConfig: session.serialConfig,
+      };
+
+      setActiveTabId(newSession.id);
+      return [...prevSessions, newSession];
+    });
+  }, [setActiveTabId]);
+
   // Toggle broadcast mode for a workspace
   const toggleBroadcast = useCallback((workspaceId: string) => {
     setBroadcastWorkspaceIds(prev => {
@@ -662,5 +687,7 @@ export const useSessionState = () => {
     logViews,
     openLogView,
     closeLogView,
+    // Copy session
+    copySession,
   };
 };

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,14 +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_SFTP_USE_COMPRESSED_UPLOAD,
+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 { 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';
@@ -43,6 +50,11 @@ const DEFAULT_HOTKEY_SCHEME: HotkeyScheme =
 const DEFAULT_SFTP_DOUBLE_CLICK_BEHAVIOR: 'open' | 'transfer' = 'open';
 const DEFAULT_SFTP_AUTO_SYNC = false;
 const DEFAULT_SFTP_SHOW_HIDDEN_FILES = false;
+const DEFAULT_SFTP_USE_COMPRESSED_UPLOAD = true;
+
+// 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);
@@ -70,6 +82,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,
@@ -112,6 +132,7 @@ const applyThemeTokens = (
 
 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;
@@ -134,6 +155,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);
@@ -173,6 +198,27 @@ export const useSettingsState = () => {
     const stored = readStoredString(STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES);
     return stored === 'true' ? true : DEFAULT_SFTP_SHOW_HIDDEN_FILES;
   });
+  const [sftpUseCompressedUpload, setSftpUseCompressedUpload] = useState<boolean>(() => {
+    const stored = readStoredString(STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD);
+    // 兼容旧的设置值
+    if (stored === 'true' || stored === 'enabled' || stored === 'ask') return true;
+    if (stored === 'false' || stored === 'disabled') return false;
+    return DEFAULT_SFTP_USE_COMPRESSED_UPLOAD;
+  });
+
+  // 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) => {
@@ -233,6 +279,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();
@@ -257,6 +312,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);
       }
@@ -343,6 +403,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) {
@@ -411,11 +476,18 @@ export const useSettingsState = () => {
           setSftpShowHiddenFiles(newValue);
         }
       }
+      // Sync SFTP compressed upload setting from other windows
+      if (e.key === STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD && e.newValue !== null) {
+        const newValue = e.newValue === 'true' || e.newValue === 'enabled';
+        if (newValue !== sftpUseCompressedUpload) {
+          setSftpUseCompressedUpload(newValue);
+        }
+      }
     };
 
     window.addEventListener('storage', handleStorageChange);
     return () => window.removeEventListener('storage', handleStorageChange);
-  }, [theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent, customCSS, hotkeyScheme, uiLanguage, terminalThemeId, terminalFontFamilyId, terminalFontSize, sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles]);
+  }, [theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent, customCSS, uiFontFamilyId, hotkeyScheme, uiLanguage, terminalThemeId, terminalFontFamilyId, terminalFontSize, sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles, sftpUseCompressedUpload]);
 
   useEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_TERM_THEME, terminalThemeId);
@@ -484,6 +556,28 @@ export const useSettingsState = () => {
     notifySettingsChanged(STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES, sftpShowHiddenFiles);
   }, [sftpShowHiddenFiles, notifySettingsChanged]);
 
+  // Persist SFTP compressed upload setting
+  useEffect(() => {
+    localStorageAdapter.writeString(STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD, sftpUseCompressedUpload ? 'true' : 'false');
+    notifySettingsChanged(STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD, sftpUseCompressedUpload);
+  }, [sftpUseCompressedUpload, 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 => {
@@ -564,6 +658,8 @@ export const useSettingsState = () => {
     setAccentMode,
     customAccent,
     setCustomAccent,
+    uiFontFamilyId,
+    setUiFontFamilyId,
     syncConfig,
     updateSyncConfig,
     uiLanguage,
@@ -596,6 +692,15 @@ export const useSettingsState = () => {
     setSftpAutoSync,
     sftpShowHiddenFiles,
     setSftpShowHiddenFiles,
+    sftpUseCompressedUpload,
+    setSftpUseCompressedUpload,
     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,6 +170,12 @@ 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;
@@ -185,7 +193,7 @@ export const useSftpBackend = () => {
     remotePath: string,
     fileName: string,
     appPath: string,
-    options?: { enableWatch?: boolean }
+    options?: { enableWatch?: boolean; encoding?: SftpFilenameEncoding }
   ): Promise<{ localTempPath: string; watchId?: string }> => {
     const bridge = netcattyBridge.get();
     if (!bridge?.downloadSftpToTemp || !bridge?.openWithApplication) {
@@ -194,7 +202,7 @@ export const useSftpBackend = () => {
     
     // Download the file to temp
     console.log("[SFTPBackend] Downloading file to temp", { sftpId, remotePath, fileName });
-    const tempPath = await bridge.downloadSftpToTemp(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)
@@ -217,7 +225,7 @@ export const useSftpBackend = () => {
     if (options?.enableWatch && bridge.startFileWatch) {
       try {
         console.log("[SFTPBackend] Starting file watch", { tempPath, remotePath, sftpId });
-        const result = await bridge.startFileWatch(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) {
@@ -257,9 +265,9 @@ export const useSftpBackend = () => {
 
     startStreamTransfer,
     cancelTransfer,
+    cancelSftpUpload,
     onTransferProgress,
     selectApplication,
     downloadSftpToTempAndOpen,
   };
 };
-

application/state/useStoredViewMode.ts

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
 import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
 
-export type ViewMode = "grid" | "list";
+export type ViewMode = "grid" | "list" | "tree";
 
 const isViewMode = (value: string | null): value is ViewMode =>
-  value === "grid" || value === "list";
+  value === "grid" || value === "list" || value === "tree";
 
 export const useStoredViewMode = (
   storageKey: string,

application/state/useTerminalBackend.ts

@@ -122,6 +122,12 @@ export const useTerminalBackend = () => {
     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,
@@ -138,6 +144,7 @@ export const useTerminalBackend = () => {
     listSerialPorts,
     execCommand,
     getSessionPwd,
+    getServerStats,
     writeToSession,
     resizeSession,
     closeSession,

application/state/useTreeExpandedState.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
+
+export const useTreeExpandedState = (storageKey: string) => {
+  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => {
+    const stored = localStorageAdapter.readString(storageKey);
+    if (stored) {
+      try {
+        const paths = JSON.parse(stored) as string[];
+        return new Set(paths);
+      } catch {
+        return new Set();
+      }
+    }
+    return new Set();
+  });
+
+  useEffect(() => {
+    const pathsArray = Array.from(expandedPaths);
+    localStorageAdapter.writeString(storageKey, JSON.stringify(pathsArray));
+  }, [storageKey, expandedPaths]);
+
+  const togglePath = (path: string) => {
+    const newExpanded = new Set(expandedPaths);
+    if (newExpanded.has(path)) {
+      newExpanded.delete(path);
+    } else {
+      newExpanded.add(path);
+    }
+    setExpandedPaths(newExpanded);
+  };
+
+  const expandAll = (allPaths: string[]) => {
+    setExpandedPaths(new Set(allPaths));
+  };
+
+  const collapseAll = () => {
+    setExpandedPaths(new Set());
+  };
+
+  return {
+    expandedPaths,
+    togglePath,
+    expandAll,
+    collapseAll,
+  };
+};

application/state/useVaultState.ts

@@ -6,6 +6,7 @@ import {
   Identity,
   KeyCategory,
   KnownHost,
+  ManagedSource,
   ShellHistoryEntry,
   Snippet,
   SSHKey,
@@ -22,6 +23,7 @@ import {
   STORAGE_KEY_KEYS,
   STORAGE_KEY_KNOWN_HOSTS,
   STORAGE_KEY_LEGACY_KEYS,
+  STORAGE_KEY_MANAGED_SOURCES,
   STORAGE_KEY_SHELL_HISTORY,
   STORAGE_KEY_SNIPPET_PACKAGES,
   STORAGE_KEY_SNIPPETS,
@@ -95,6 +97,7 @@ export const useVaultState = () => {
   const [knownHosts, setKnownHosts] = useState<KnownHost[]>([]);
   const [shellHistory, setShellHistory] = useState<ShellHistoryEntry[]>([]);
   const [connectionLogs, setConnectionLogs] = useState<ConnectionLog[]>([]);
+  const [managedSources, setManagedSources] = useState<ManagedSource[]>([]);
 
   const updateHosts = useCallback((data: Host[]) => {
     const cleaned = data.map(sanitizeHost);
@@ -132,6 +135,11 @@ export const useVaultState = () => {
     localStorageAdapter.write(STORAGE_KEY_KNOWN_HOSTS, data);
   }, []);
 
+  const updateManagedSources = useCallback((data: ManagedSource[]) => {
+    setManagedSources(data);
+    localStorageAdapter.write(STORAGE_KEY_MANAGED_SOURCES, data);
+  }, []);
+
   const clearVaultData = useCallback(() => {
     updateHosts([]);
     updateKeys([]);
@@ -140,6 +148,7 @@ export const useVaultState = () => {
     updateSnippetPackages([]);
     updateCustomGroups([]);
     updateKnownHosts([]);
+    updateManagedSources([]);
     localStorageAdapter.remove(STORAGE_KEY_LEGACY_KEYS);
   }, [
     updateHosts,
@@ -149,6 +158,7 @@ export const useVaultState = () => {
     updateSnippetPackages,
     updateCustomGroups,
     updateKnownHosts,
+    updateManagedSources,
   ]);
 
   const addShellHistoryEntry = useCallback(
@@ -339,6 +349,12 @@ export const useVaultState = () => {
       STORAGE_KEY_CONNECTION_LOGS,
     );
     if (savedConnectionLogs) setConnectionLogs(savedConnectionLogs);
+
+    // Load managed sources
+    const savedManagedSources = localStorageAdapter.read<ManagedSource[]>(
+      STORAGE_KEY_MANAGED_SOURCES,
+    );
+    if (savedManagedSources) setManagedSources(savedManagedSources);
   }, [updateHosts, updateSnippets]);
 
   useEffect(() => {
@@ -407,6 +423,12 @@ export const useVaultState = () => {
       if (key === STORAGE_KEY_CONNECTION_LOGS) {
         const next = safeParse<ConnectionLog[]>(event.newValue) ?? [];
         setConnectionLogs(next);
+        return;
+      }
+
+      if (key === STORAGE_KEY_MANAGED_SOURCES) {
+        const next = safeParse<ManagedSource[]>(event.newValue) ?? [];
+        setManagedSources(next);
       }
     };
 
@@ -474,6 +496,7 @@ export const useVaultState = () => {
     knownHosts,
     shellHistory,
     connectionLogs,
+    managedSources,
     updateHosts,
     updateKeys,
     updateIdentities,
@@ -481,6 +504,7 @@ export const useVaultState = () => {
     updateSnippetPackages,
     updateCustomGroups,
     updateKnownHosts,
+    updateManagedSources,
     addShellHistoryEntry,
     clearShellHistory,
     addConnectionLog,

components/ConnectionLogsManager.tsx

@@ -7,7 +7,7 @@ import {
     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";
@@ -149,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(() => {
@@ -157,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),
@@ -222,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/GroupTreeItem.tsx

@@ -16,6 +16,7 @@ interface GroupTreeItemProps {
   onEditGroup: (path: string) => void;
   onNewHost: (path: string) => void;
   onNewSubfolder: (path: string) => void;
+  isManagedGroup?: (path: string) => boolean;
 }
 
 export const GroupTreeItem: React.FC<GroupTreeItemProps> = ({

components/HostDetailsPanel.tsx

@@ -2,6 +2,8 @@ import {
   AlertTriangle,
   Check,
   ChevronDown,
+  Eye,
+  EyeOff,
   FolderLock,
   FolderPlus,
   Forward,
@@ -27,7 +29,7 @@ import { useApplicationBackend } from "../application/state/useApplicationBacken
 import { TERMINAL_THEMES } from "../infrastructure/config/terminalThemes";
 import { MIN_FONT_SIZE, MAX_FONT_SIZE } from "../infrastructure/config/fonts";
 import { cn } from "../lib/utils";
-import { EnvVar, Host, Identity, ProxyConfig, SSHKey } from "../types";
+import { EnvVar, Host, Identity, ManagedSource, ProxyConfig, SSHKey } from "../types";
 import { DistroAvatar } from "./DistroAvatar";
 import ThemeSelectPanel from "./ThemeSelectPanel";
 import {
@@ -41,8 +43,10 @@ import { Switch } from "./ui/switch";
 import { Card } from "./ui/card";
 import { Combobox, ComboboxOption, MultiCombobox } from "./ui/combobox";
 import { Input } from "./ui/input";
+import { Textarea } from "./ui/textarea";
 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 {
@@ -67,6 +71,7 @@ interface HostDetailsPanelProps {
   availableKeys: SSHKey[];
   identities: Identity[];
   groups: string[];
+  managedSources?: ManagedSource[];
   allTags?: string[]; // All available tags for autocomplete
   allHosts?: Host[]; // All hosts for chain selection
   defaultGroup?: string | null; // Default group for new hosts (from current navigation)
@@ -81,6 +86,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   availableKeys,
   identities,
   groups,
+  managedSources = [],
   allTags = [],
   allHosts = [],
   defaultGroup,
@@ -122,6 +128,9 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   // Identity suggestion dropdown state (popover anchored to username input)
   const [identitySuggestionsOpen, setIdentitySuggestionsOpen] = useState(false);
 
+  // Password visibility state
+  const [showPassword, setShowPassword] = useState(false);
+
   // New group creation state
   const [newGroupName, setNewGroupName] = useState("");
   const [newGroupParent, setNewGroupParent] = useState("");
@@ -163,6 +172,8 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
       }
       setForm(updatedData);
       setGroupInputValue(initialData.group || "");
+      // Reset password visibility when host changes for privacy
+      setShowPassword(false);
     }
   }, [initialData]);
 
@@ -243,12 +254,51 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   };
 
   const handleSubmit = () => {
-    if (!form.hostname || !form.label) return;
+    if (!form.hostname) return;
+    // If label is empty, use hostname as label
+    let finalLabel = form.label?.trim() || form.hostname;
+    const finalGroup = groupInputValue.trim() || form.group || "";
+
+    // Find the most specific (deepest) managed source that matches the group path
+    // This handles nested managed groups correctly by preferring exact matches
+    // and longer paths over shorter prefix matches
+    const targetManagedSource = managedSources
+      .filter(s => finalGroup === s.groupName || finalGroup.startsWith(s.groupName + "/"))
+      .sort((a, b) => b.groupName.length - a.groupName.length)[0];
+
+    // Only SSH hosts can be managed (SSH config only supports SSH protocol)
+    const canBeManaged = !form.protocol || form.protocol === "ssh";
+
+    // Strip spaces from label only if host can be managed and is in a managed group
+    // (SSH config requires no spaces in Host alias)
+    if (targetManagedSource && canBeManaged) {
+      finalLabel = finalLabel.replace(/\s/g, '');
+    }
+
+    // Determine managedSourceId:
+    // - Only SSH hosts can be managed (SSH config only supports SSH protocol)
+    // - If we found a matching managed source, use its id
+    // - If managedSources was not provided (empty array) and host already has managedSourceId, preserve it
+    // - Otherwise, clear it (host is not in a managed group)
+    let finalManagedSourceId: string | undefined;
+    if (targetManagedSource && canBeManaged) {
+      finalManagedSourceId = targetManagedSource.id;
+    } else if (managedSources.length === 0 && form.managedSourceId && canBeManaged) {
+      // managedSources not provided, preserve existing value
+      finalManagedSourceId = form.managedSourceId;
+    } else {
+      finalManagedSourceId = undefined;
+    }
+
     const cleaned: Host = {
       ...form,
-      group: groupInputValue.trim() || form.group,
+      label: finalLabel,
+      group: finalGroup,
       tags: form.tags || [],
       port: form.port || 22,
+      // Clear password if savePassword is explicitly set to false
+      password: form.savePassword === false ? undefined : form.password,
+      managedSourceId: finalManagedSourceId,
     };
     onSave(cleaned);
   };
@@ -498,7 +548,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
           size="icon"
           className="h-8 w-8"
           onClick={handleSubmit}
-          disabled={!form.hostname || !form.label}
+          disabled={!form.hostname}
           aria-label={t("hostDetails.saveAria")}
         >
           <Check size={16} />
@@ -506,32 +556,6 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
       }
     >
       <AsidePanelContent>
-        <Card className="p-3 space-y-2 bg-card border-border/80">
-          <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}
-              fallback={
-                form.label?.slice(0, 2).toUpperCase() ||
-                form.hostname?.slice(0, 2).toUpperCase() ||
-                "H"
-              }
-              className="h-10 w-10"
-            />
-            <Input
-              placeholder={t("hostDetails.hostname.placeholder")}
-              value={form.hostname}
-              onChange={(e) => update("hostname", e.target.value)}
-              className="h-10 flex-1"
-            />
-          </div>
-        </Card>
-
         <Card className="p-3 space-y-3 bg-card border-border/80">
           <div className="flex items-center gap-2">
             <Settings2 size={14} className="text-muted-foreground" />
@@ -542,7 +566,21 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
           <Input
             placeholder={t("hostDetails.label.placeholder")}
             value={form.label}
-            onChange={(e) => update("label", e.target.value)}
+            onChange={(e) => {
+              let value = e.target.value;
+              // Only strip spaces if the TARGET group belongs to a managed source
+              // (don't use form.managedSourceId as it reflects old state before group change)
+              const targetGroup = groupInputValue.trim() || form.group || "";
+              const willBeManaged = managedSources.some(s =>
+                targetGroup === s.groupName || targetGroup.startsWith(s.groupName + "/")
+              );
+              // Also check protocol - only SSH hosts can be managed
+              const canBeManaged = !form.protocol || form.protocol === "ssh";
+              if (willBeManaged && canBeManaged) {
+                value = value.replace(/\s/g, '');
+              }
+              update("label", value);
+            }}
             className="h-10"
           />
 
@@ -588,6 +626,32 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
           </div>
         </Card>
 
+        <Card className="p-3 space-y-2 bg-card border-border/80">
+          <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}
+              fallback={
+                form.label?.slice(0, 2).toUpperCase() ||
+                form.hostname?.slice(0, 2).toUpperCase() ||
+                "H"
+              }
+              className="h-10 w-10"
+            />
+            <Input
+              placeholder={t("hostDetails.hostname.placeholder")}
+              value={form.hostname}
+              onChange={(e) => update("hostname", e.target.value)}
+              className="h-10 flex-1"
+            />
+          </div>
+        </Card>
+
         <Card className="p-3 space-y-3 bg-card border-border/80">
           <div className="flex items-center gap-2">
             <KeyRound size={14} className="text-muted-foreground" />
@@ -797,13 +861,36 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
             )}
 
             {!selectedIdentity && !form.identityId && (
-              <Input
-                placeholder={t("hostDetails.password.placeholder")}
-                type="password"
-                value={form.password || ""}
-                onChange={(e) => update("password", e.target.value)}
-                className="h-10"
-              />
+              <div className="relative">
+                <Input
+                  placeholder={t("hostDetails.password.placeholder")}
+                  type={showPassword ? "text" : "password"}
+                  value={form.password || ""}
+                  onChange={(e) => update("password", e.target.value)}
+                  className="h-10 pr-10"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground transition-colors"
+                  title={showPassword ? t("hostDetails.password.hide") : t("hostDetails.password.show")}
+                >
+                  {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                </button>
+              </div>
+            )}
+
+            {/* 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 */}
@@ -987,6 +1074,27 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
               {t("hostDetails.sftp.sudo.passwordWarning")}
             </p>
           )}
+          <div className="space-y-1">
+            <div className="text-sm font-medium">
+              {t("hostDetails.sftp.encoding")}
+            </div>
+            <div className="text-xs text-muted-foreground">
+              {t("hostDetails.sftp.encoding.desc")}
+            </div>
+            <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">
@@ -1277,11 +1385,12 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
             <TerminalSquare size={14} className="text-muted-foreground" />
             <p className="text-xs font-semibold">{t("hostDetails.startupCommand")}</p>
           </div>
-          <Input
+          <Textarea
             placeholder={t("hostDetails.startupCommand.placeholder")}
             value={form.startupCommand || ""}
             onChange={(e) => update("startupCommand", e.target.value)}
-            className="h-9"
+            className="min-h-[80px] font-mono text-sm"
+            rows={3}
           />
           <p className="text-xs text-muted-foreground">
             {t("hostDetails.startupCommand.help")}
@@ -1423,7 +1532,7 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
         <Button
           className="w-full h-10"
           onClick={handleSubmit}
-          disabled={!form.hostname || !form.label}
+          disabled={!form.hostname}
         >
           {t("common.save")}
         </Button>

components/HostForm.tsx

@@ -280,6 +280,29 @@ const HostForm: React.FC<HostFormProps> = ({
                 }
               />
             </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">

components/HostTreeView.tsx

@@ -0,0 +1,501 @@
+import { ChevronRight, FileSymlink, Folder, FolderOpen, Monitor, Server, Expand, Minimize2 } from 'lucide-react';
+import React, { useMemo } from 'react';
+import { useI18n } from '../application/i18n/I18nProvider';
+import { useTreeExpandedState } from '../application/state/useTreeExpandedState';
+import { sanitizeHost } from '../domain/host';
+import { STORAGE_KEY_VAULT_HOSTS_TREE_EXPANDED } from '../infrastructure/config/storageKeys';
+import { cn } from '../lib/utils';
+import { GroupNode, Host } from '../types';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from './ui/context-menu';
+import { DistroAvatar } from './DistroAvatar';
+import { Button } from './ui/button';
+
+interface HostTreeViewProps {
+  groupTree: GroupNode[];
+  hosts: Host[];
+  sortMode?: 'az' | 'za' | 'newest' | 'oldest' | 'group';
+  expandedPaths?: Set<string>;
+  onTogglePath?: (path: string) => void;
+  onExpandAll?: (paths: string[]) => void;
+  onCollapseAll?: () => void;
+  onConnect: (host: Host) => void;
+  onEditHost: (host: Host) => void;
+  onDuplicateHost: (host: Host) => void;
+  onDeleteHost: (host: Host) => void;
+  onCopyCredentials: (host: Host) => void;
+  onNewHost: (groupPath?: string) => void;
+  onNewGroup: (parentPath?: string) => void;
+  onEditGroup: (groupPath: string) => void;
+  onDeleteGroup: (groupPath: string) => void;
+  moveHostToGroup: (hostId: string, groupPath: string | null) => void;
+  moveGroup: (sourcePath: string, targetPath: string) => void;
+  managedGroupPaths?: Set<string>;
+  onUnmanageGroup?: (groupPath: string) => void;
+}
+
+interface TreeNodeProps {
+  node: GroupNode;
+  depth: number;
+  sortMode: 'az' | 'za' | 'newest' | 'oldest' | 'group';
+  expandedPaths: Set<string>;
+  onToggle: (path: string) => void;
+  onConnect: (host: Host) => void;
+  onEditHost: (host: Host) => void;
+  onDuplicateHost: (host: Host) => void;
+  onDeleteHost: (host: Host) => void;
+  onCopyCredentials: (host: Host) => void;
+  onNewHost: (groupPath?: string) => void;
+  onNewGroup: (parentPath?: string) => void;
+  onEditGroup: (groupPath: string) => void;
+  onDeleteGroup: (groupPath: string) => void;
+  moveHostToGroup: (hostId: string, groupPath: string | null) => void;
+  moveGroup: (sourcePath: string, targetPath: string) => void;
+  managedGroupPaths?: Set<string>;
+  onUnmanageGroup?: (groupPath: string) => void;
+}
+
+const TreeNode: React.FC<TreeNodeProps> = ({
+  node,
+  depth,
+  sortMode,
+  expandedPaths,
+  onToggle,
+  onConnect,
+  onEditHost,
+  onDuplicateHost,
+  onDeleteHost,
+  onCopyCredentials,
+  onNewHost,
+  onNewGroup,
+  onEditGroup,
+  onDeleteGroup,
+  moveHostToGroup,
+  moveGroup,
+  managedGroupPaths,
+  onUnmanageGroup,
+}) => {
+  const { t } = useI18n();
+  const isExpanded = expandedPaths.has(node.path);
+  const hasChildren = node.children && Object.keys(node.children).length > 0;
+  const paddingLeft = `${depth * 20 + 12}px`;
+  const isManaged = managedGroupPaths?.has(node.path) ?? false;
+
+  const childNodes = useMemo(() => {
+    if (!node.children) return [];
+    const nodes = Object.values(node.children) as unknown as GroupNode[];
+    return nodes.sort((a, b) => {
+      switch (sortMode) {
+        case 'za':
+          return b.name.localeCompare(a.name);
+        case 'newest':
+        case 'oldest':
+          // For groups, fall back to name sorting since groups don't have creation dates
+          return a.name.localeCompare(b.name);
+        case 'az':
+        default:
+          return a.name.localeCompare(b.name);
+      }
+    });
+  }, [node.children, sortMode]);
+
+  const sortedHosts = useMemo(() => {
+    return [...node.hosts].sort((a, b) => {
+      switch (sortMode) {
+        case 'az':
+          return a.label.localeCompare(b.label);
+        case 'za':
+          return b.label.localeCompare(a.label);
+        case 'newest':
+          return (b.createdAt || 0) - (a.createdAt || 0);
+        case 'oldest':
+          return (a.createdAt || 0) - (b.createdAt || 0);
+        default:
+          return a.label.localeCompare(b.label);
+      }
+    });
+  }, [node.hosts, sortMode]);
+
+  return (
+    <div>
+      {/* Group Node */}
+      <Collapsible open={isExpanded} onOpenChange={() => onToggle(node.path)}>
+        <ContextMenu>
+          <ContextMenuTrigger>
+            <CollapsibleTrigger asChild>
+              <div
+                className={cn(
+                  "flex items-center py-2 pr-3 text-sm font-medium cursor-pointer transition-colors select-none group hover:bg-secondary/60 rounded-lg",
+                )}
+                style={{ paddingLeft }}
+                draggable
+                onDragStart={(e) => e.dataTransfer.setData("group-path", node.path)}
+                onDragOver={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
+                onDrop={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  const hostId = e.dataTransfer.getData("host-id");
+                  const groupPath = e.dataTransfer.getData("group-path");
+                  if (hostId) moveHostToGroup(hostId, node.path);
+                  if (groupPath) moveGroup(groupPath, node.path);
+                }}
+              >
+                <div className="mr-2 flex-shrink-0 w-4 h-4 flex items-center justify-center">
+                  {(hasChildren || node.hosts.length > 0) && (
+                    <div className={cn("transition-transform duration-200", isExpanded ? "rotate-90" : "")}>
+                      <ChevronRight size={14} />
+                    </div>
+                  )}
+                </div>
+                <div className="mr-3 text-primary/80 group-hover:text-primary transition-colors">
+                  {isExpanded ? <FolderOpen size={18} /> : <Folder size={18} />}
+                </div>
+                <span className="truncate flex-1 font-semibold">{node.name}</span>
+                {isManaged && (
+                  <span className="inline-flex items-center gap-1 text-[10px] font-medium px-1.5 py-0.5 rounded bg-primary/15 text-primary shrink-0 mr-1.5">
+                    <FileSymlink size={10} />
+                    Managed
+                  </span>
+                )}
+                {(node.hosts.length > 0 || hasChildren) && (
+                  <span className="text-xs opacity-70 bg-background/50 px-2 py-0.5 rounded-full border border-border">
+                    {node.hosts.length}
+                  </span>
+                )}
+              </div>
+            </CollapsibleTrigger>
+          </ContextMenuTrigger>
+          <ContextMenuContent>
+            <ContextMenuItem onClick={() => onNewHost(node.path)}>
+              <Server className="mr-2 h-4 w-4" /> {t("vault.hosts.newHost")}
+            </ContextMenuItem>
+            <ContextMenuItem onClick={() => onNewGroup(node.path)}>
+              <Folder className="mr-2 h-4 w-4" /> {t("vault.hosts.newGroup")}
+            </ContextMenuItem>
+            <ContextMenuItem onClick={() => onEditGroup(node.path)}>
+              <FolderOpen className="mr-2 h-4 w-4" /> {t("vault.groups.rename")}
+            </ContextMenuItem>
+            <ContextMenuItem 
+              onClick={() => onDeleteGroup(node.path)}
+              className="text-destructive focus:text-destructive"
+            >
+              <FolderOpen className="mr-2 h-4 w-4" /> {t("vault.groups.delete")}
+            </ContextMenuItem>
+            {isManaged && onUnmanageGroup && (
+              <ContextMenuItem onClick={() => onUnmanageGroup(node.path)}>
+                <FileSymlink className="mr-2 h-4 w-4" /> {t("vault.managedSource.unmanage")}
+              </ContextMenuItem>
+            )}
+          </ContextMenuContent>
+        </ContextMenu>
+
+        <CollapsibleContent>
+          {/* Child Groups */}
+          {childNodes.map((child) => (
+            <TreeNode
+              key={child.path}
+              node={child}
+              depth={depth + 1}
+              sortMode={sortMode}
+              expandedPaths={expandedPaths}
+              onToggle={onToggle}
+              onConnect={onConnect}
+              onEditHost={onEditHost}
+              onDuplicateHost={onDuplicateHost}
+              onDeleteHost={onDeleteHost}
+              onCopyCredentials={onCopyCredentials}
+              onNewHost={onNewHost}
+              onNewGroup={onNewGroup}
+              onEditGroup={onEditGroup}
+              onDeleteGroup={onDeleteGroup}
+              moveHostToGroup={moveHostToGroup}
+              moveGroup={moveGroup}
+              managedGroupPaths={managedGroupPaths}
+              onUnmanageGroup={onUnmanageGroup}
+            />
+          ))}
+          
+          {/* Hosts in this group */}
+          {sortedHosts.map((host) => (
+            <HostTreeItem
+              key={host.id}
+              host={host}
+              depth={depth + 1}
+              onConnect={onConnect}
+              onEditHost={onEditHost}
+              onDuplicateHost={onDuplicateHost}
+              onDeleteHost={onDeleteHost}
+              onCopyCredentials={onCopyCredentials}
+              moveHostToGroup={moveHostToGroup}
+            />
+          ))}
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+interface HostTreeItemProps {
+  host: Host;
+  depth: number;
+  onConnect: (host: Host) => void;
+  onEditHost: (host: Host) => void;
+  onDuplicateHost: (host: Host) => void;
+  onDeleteHost: (host: Host) => void;
+  onCopyCredentials: (host: Host) => void;
+  moveHostToGroup: (hostId: string, groupPath: string | null) => void;
+}
+
+const HostTreeItem: React.FC<HostTreeItemProps> = ({
+  host,
+  depth,
+  onConnect,
+  onEditHost,
+  onDuplicateHost,
+  onDeleteHost,
+  onCopyCredentials,
+  moveHostToGroup: _moveHostToGroup,
+}) => {
+  const { t } = useI18n();
+  const paddingLeft = `${depth * 20 + 12}px`;
+  const safeHost = sanitizeHost(host);
+  const tags = host.tags || [];
+  const isTelnet = host.protocol === 'telnet';
+  const displayUsername = isTelnet
+    ? (host.telnetUsername?.trim() || host.username?.trim() || '')
+    : (host.username?.trim() || '');
+  const displayPort = isTelnet
+    ? (host.telnetPort ?? host.port ?? 23)
+    : (host.port ?? 22);
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger>
+        <div
+          className="flex items-center py-2 pr-3 text-sm cursor-pointer transition-colors select-none group hover:bg-secondary/40 rounded-lg"
+          style={{ paddingLeft }}
+          draggable
+          onDragStart={(e) => e.dataTransfer.setData("host-id", host.id)}
+          onClick={() => onConnect(safeHost)}
+        >
+          <div className="mr-2 flex-shrink-0 w-4 h-4" />
+          <div className="mr-3 flex-shrink-0">
+            <DistroAvatar host={host} fallback={(host.os || "L")[0].toUpperCase()} size="sm" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="font-medium truncate">{host.label}</div>
+            <div className="text-xs text-muted-foreground truncate">
+              {displayUsername}@{host.hostname}:{displayPort}
+            </div>
+          </div>
+          <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+            {host.protocol && host.protocol !== 'ssh' && (
+              <span className="text-xs px-1.5 py-0.5 bg-primary/10 text-primary rounded">
+                {host.protocol.toUpperCase()}
+              </span>
+            )}
+            {tags.length > 0 && (
+              <span className="text-xs opacity-60">
+                {tags.slice(0, 2).join(', ')}
+                {tags.length > 2 && '...'}
+              </span>
+            )}
+          </div>
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem onClick={() => onConnect(safeHost)}>
+          <Monitor className="mr-2 h-4 w-4" /> {t("vault.hosts.connect")}
+        </ContextMenuItem>
+        <ContextMenuItem onClick={() => onEditHost(host)}>
+          <Server className="mr-2 h-4 w-4" /> {t("action.edit")}
+        </ContextMenuItem>
+        <ContextMenuItem onClick={() => onDuplicateHost(host)}>
+          <Server className="mr-2 h-4 w-4" /> {t("action.duplicate")}
+        </ContextMenuItem>
+        <ContextMenuItem onClick={() => onCopyCredentials(host)}>
+          <Server className="mr-2 h-4 w-4" /> {t("vault.hosts.copyCredentials")}
+        </ContextMenuItem>
+        <ContextMenuItem 
+          onClick={() => onDeleteHost(host)}
+          className="text-destructive focus:text-destructive"
+        >
+          <Server className="mr-2 h-4 w-4" /> {t("action.delete")}
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+};
+
+export const HostTreeView: React.FC<HostTreeViewProps> = ({
+  groupTree,
+  hosts,
+  sortMode = 'az',
+  expandedPaths: externalExpandedPaths,
+  onTogglePath: externalOnTogglePath,
+  onExpandAll: externalOnExpandAll,
+  onCollapseAll: externalOnCollapseAll,
+  onConnect,
+  onEditHost,
+  onDuplicateHost,
+  onDeleteHost,
+  onCopyCredentials,
+  onNewHost,
+  onNewGroup,
+  onEditGroup,
+  onDeleteGroup,
+  moveHostToGroup,
+  moveGroup,
+  managedGroupPaths,
+  onUnmanageGroup,
+}) => {
+  const { t } = useI18n();
+  
+  // Use external state if provided, otherwise use local persistent state
+  const localTreeState = useTreeExpandedState(STORAGE_KEY_VAULT_HOSTS_TREE_EXPANDED);
+  
+  const expandedPaths = externalExpandedPaths || localTreeState.expandedPaths;
+  const togglePath = externalOnTogglePath || localTreeState.togglePath;
+  const expandAll = externalOnExpandAll || localTreeState.expandAll;
+  const collapseAll = externalOnCollapseAll || localTreeState.collapseAll;
+
+  // Get all possible group paths for expand/collapse all functionality
+  const getAllGroupPaths = (nodes: GroupNode[]): string[] => {
+    const paths: string[] = [];
+    const traverse = (nodeList: GroupNode[]) => {
+      nodeList.forEach(node => {
+        paths.push(node.path);
+        if (node.children) {
+          traverse(Object.values(node.children) as GroupNode[]);
+        }
+      });
+    };
+    traverse(nodes);
+    return paths;
+  };
+
+  const allGroupPaths = useMemo(() => getAllGroupPaths(groupTree), [groupTree]);
+
+  const handleExpandAll = () => {
+    expandAll(allGroupPaths);
+  };
+
+  const handleCollapseAll = () => {
+    collapseAll();
+  };
+
+  // Get ungrouped hosts (hosts without a group or with empty group) and sort them
+  const ungroupedHosts = useMemo(() => {
+    const hosts_without_group = hosts.filter(host => !host.group || host.group === '');
+    return hosts_without_group.sort((a, b) => {
+      switch (sortMode) {
+        case 'az':
+          return a.label.localeCompare(b.label);
+        case 'za':
+          return b.label.localeCompare(a.label);
+        case 'newest':
+          return (b.createdAt || 0) - (a.createdAt || 0);
+        case 'oldest':
+          return (a.createdAt || 0) - (b.createdAt || 0);
+        default:
+          return a.label.localeCompare(b.label);
+      }
+    });
+  }, [hosts, sortMode]);
+
+  // Sort group tree based on sort mode
+  const sortedGroupTree = useMemo(() => {
+    return [...groupTree].sort((a, b) => {
+      switch (sortMode) {
+        case 'za':
+          return b.name.localeCompare(a.name);
+        case 'newest':
+        case 'oldest':
+          // For groups, fall back to name sorting since groups don't have creation dates
+          return a.name.localeCompare(b.name);
+        case 'az':
+        default:
+          return a.name.localeCompare(b.name);
+      }
+    });
+  }, [groupTree, sortMode]);
+
+  return (
+    <div className="space-y-1">
+      {/* Expand/Collapse controls */}
+      {groupTree.length > 0 && (
+        <div className="flex items-center gap-2 mb-3 pb-2 border-b border-border/30">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleExpandAll}
+            className="h-7 px-2 text-xs"
+          >
+            <Expand size={12} className="mr-1" />
+            {t("vault.tree.expandAll")}
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleCollapseAll}
+            className="h-7 px-2 text-xs"
+          >
+            <Minimize2 size={12} className="mr-1" />
+            {t("vault.tree.collapseAll")}
+          </Button>
+        </div>
+      )}
+
+      {/* Group tree */}
+      {sortedGroupTree.map((node) => (
+        <TreeNode
+          key={node.path}
+          node={node}
+          depth={0}
+          sortMode={sortMode}
+          expandedPaths={expandedPaths}
+          onToggle={togglePath}
+          onConnect={onConnect}
+          onEditHost={onEditHost}
+          onDuplicateHost={onDuplicateHost}
+          onDeleteHost={onDeleteHost}
+          onCopyCredentials={onCopyCredentials}
+          onNewHost={onNewHost}
+          onNewGroup={onNewGroup}
+          onEditGroup={onEditGroup}
+          onDeleteGroup={onDeleteGroup}
+          moveHostToGroup={moveHostToGroup}
+          moveGroup={moveGroup}
+          managedGroupPaths={managedGroupPaths}
+          onUnmanageGroup={onUnmanageGroup}
+        />
+      ))}
+
+      {/* Ungrouped hosts at root level */}
+      {ungroupedHosts.map((host) => (
+        <HostTreeItem
+          key={host.id}
+          host={host}
+          depth={0}
+          onConnect={onConnect}
+          onEditHost={onEditHost}
+          onDuplicateHost={onDuplicateHost}
+          onDeleteHost={onDeleteHost}
+          onCopyCredentials={onCopyCredentials}
+          moveHostToGroup={moveHostToGroup}
+        />
+      ))}
+      
+      {/* Empty state */}
+      {ungroupedHosts.length === 0 && groupTree.length === 0 && (
+        <div className="text-center py-12 text-muted-foreground">
+          <Server size={48} className="mx-auto mb-4 opacity-50" />
+          <p className="text-sm">{t("vault.hosts.empty")}</p>
+        </div>
+      )}
+    </div>
+  );
+};

components/KeychainManager.tsx

@@ -23,6 +23,7 @@ import { STORAGE_KEY_VAULT_KEYS_VIEW_MODE } from "../infrastructure/config/stora
 import { logger } from "../lib/logger";
 import { cn } from "../lib/utils";
 import { Host, Identity, KeyType, SSHKey } from "../types";
+import { ManagedSource } from "../domain/models";
 import { useKeychainBackend } from "../application/state/useKeychainBackend";
 import SelectHostPanel from "./SelectHostPanel";
 import {
@@ -68,6 +69,7 @@ interface KeychainManagerProps {
   identities?: Identity[];
   hosts?: Host[];
   customGroups?: string[];
+  managedSources?: ManagedSource[];
   onSave: (key: SSHKey) => void;
   onUpdate: (key: SSHKey) => void;
   onDelete: (id: string) => void;
@@ -83,6 +85,7 @@ const KeychainManager: React.FC<KeychainManagerProps> = ({
   identities = [],
   hosts = [],
   customGroups = [],
+  managedSources = [],
   onSave,
   onUpdate,
   onDelete,
@@ -1282,6 +1285,7 @@ echo $3 >> "$FILE"`);
               onBack={() => setShowHostSelector(false)}
               onContinue={() => setShowHostSelector(false)}
               availableKeys={keys}
+              managedSources={managedSources}
               onSaveHost={onSaveHost}
               onCreateGroup={onCreateGroup}
             />

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/PassphraseModal.tsx

@@ -0,0 +1,169 @@
+/**
+ * Passphrase Modal
+ * Modal for requesting passphrase for encrypted SSH keys
+ */
+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 PassphraseRequest {
+  requestId: string;
+  keyPath: string;
+  keyName: string;
+  hostname?: string;
+}
+
+interface PassphraseModalProps {
+  request: PassphraseRequest | null;
+  onSubmit: (requestId: string, passphrase: string) => void;
+  onCancel: (requestId: string) => void;
+  onSkip?: (requestId: string) => void;
+}
+
+export const PassphraseModal: React.FC<PassphraseModalProps> = ({
+  request,
+  onSubmit,
+  onCancel,
+  onSkip,
+}) => {
+  const { t } = useI18n();
+  const [passphrase, setPassphrase] = useState("");
+  const [showPassphrase, setShowPassphrase] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Reset state when request changes
+  useEffect(() => {
+    if (request) {
+      setPassphrase("");
+      setShowPassphrase(false);
+      setIsSubmitting(false);
+    }
+  }, [request]);
+
+  const handleSubmit = useCallback(() => {
+    if (!request || isSubmitting || !passphrase) return;
+    setIsSubmitting(true);
+    onSubmit(request.requestId, passphrase);
+  }, [request, passphrase, onSubmit, isSubmitting]);
+
+  const handleCancel = useCallback(() => {
+    if (!request) return;
+    onCancel(request.requestId);
+  }, [request, onCancel]);
+
+  const handleSkip = useCallback(() => {
+    if (!request || !onSkip) return;
+    onSkip(request.requestId);
+  }, [request, onSkip]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" && !isSubmitting && passphrase) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit, isSubmitting, passphrase]
+  );
+
+  if (!request) return null;
+
+  const keyDisplayName = request.keyName || request.keyPath.split("/").pop() || "SSH Key";
+
+  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>{t("passphrase.title")}</DialogTitle>
+              <DialogDescription className="mt-1">
+                {request.hostname
+                  ? t("passphrase.descWithHost", { keyName: keyDisplayName, hostname: request.hostname })
+                  : t("passphrase.desc", { keyName: keyDisplayName })}
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="space-y-4 py-2">
+          <div className="space-y-2">
+            <Label htmlFor="passphrase-input">
+              {t("passphrase.label")}
+            </Label>
+            <div className="relative">
+              <Input
+                id="passphrase-input"
+                type={showPassphrase ? "text" : "password"}
+                value={passphrase}
+                onChange={(e) => setPassphrase(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder=""
+                className="pr-10"
+                autoFocus
+                disabled={isSubmitting}
+              />
+              <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={() => setShowPassphrase(!showPassphrase)}
+                disabled={isSubmitting}
+              >
+                {showPassphrase ? <EyeOff size={16} /> : <Eye size={16} />}
+              </button>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t("passphrase.keyPath")}: <code className="text-xs">{request.keyPath}</code>
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between pt-2">
+          <div className="flex gap-2">
+            <Button
+              variant="secondary"
+              onClick={handleCancel}
+              disabled={isSubmitting}
+            >
+              {t("common.cancel")}
+            </Button>
+            {onSkip && (
+              <Button
+                variant="ghost"
+                onClick={handleSkip}
+                disabled={isSubmitting}
+              >
+                {t("passphrase.skip")}
+              </Button>
+            )}
+          </div>
+          <Button onClick={handleSubmit} disabled={isSubmitting || !passphrase}>
+            {isSubmitting ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                {t("passphrase.unlocking")}
+              </>
+            ) : (
+              t("passphrase.unlock")
+            )}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default PassphraseModal;

components/PortForwardingNew.tsx

@@ -15,6 +15,7 @@ import { useI18n } from "../application/i18n/I18nProvider";
 import { usePortForwardingState } from "../application/state/usePortForwardingState";
 import {
   Host,
+  ManagedSource,
   PortForwardingRule,
   PortForwardingType,
   SSHKey,
@@ -64,6 +65,7 @@ interface PortForwardingProps {
   keys: SSHKey[];
   identities?: import('../domain/models').Identity[];
   customGroups: string[];
+  managedSources?: ManagedSource[];
   onNewHost?: () => void;
   onSaveHost?: (host: Host) => void;
   onCreateGroup?: (groupPath: string) => void;
@@ -74,6 +76,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
   keys,
   identities = [],
   customGroups: _customGroups,
+  managedSources = [],
   onNewHost: _onNewHost,
   onSaveHost,
   onCreateGroup: _onCreateGroup,
@@ -844,6 +847,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
           onContinue={() => setShowHostSelector(false)}
           availableKeys={keys}
           identities={identities}
+          managedSources={managedSources}
           onSaveHost={onSaveHost}
           onCreateGroup={_onCreateGroup}
         />

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/SelectHostPanel.tsx

@@ -11,6 +11,7 @@ import React, { useMemo, useState } from "react";
 import { cn } from "../lib/utils";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { Host, SSHKey } from "../types";
+import { ManagedSource } from "../domain/models";
 import { DistroAvatar } from "./DistroAvatar";
 import HostDetailsPanel from "./HostDetailsPanel";
 import { Button } from "./ui/button";
@@ -31,6 +32,7 @@ interface SelectHostPanelProps {
   // Props for inline host creation
   availableKeys?: SSHKey[];
   identities?: import('../domain/models').Identity[];
+  managedSources?: ManagedSource[];
   onSaveHost?: (host: Host) => void;
   onCreateGroup?: (groupPath: string) => void;
   title?: string;
@@ -49,6 +51,7 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
   onNewHost,
   availableKeys = [],
   identities = [],
+  managedSources = [],
   onSaveHost,
   onCreateGroup,
   title,
@@ -407,6 +410,7 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
           availableKeys={availableKeys}
           identities={identities}
           groups={customGroups}
+          managedSources={managedSources}
           allHosts={hosts}
           onSave={(host) => {
             onSaveHost(host);

components/SettingsPage.tsx

@@ -71,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" />}
@@ -158,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}
@@ -201,7 +203,16 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                         </React.Suspense>
                     )}
 
-                    {mountedTabs.has("system") && <SettingsSystemTab />}
+                    {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

@@ -5,6 +5,7 @@ import { useStoredViewMode } from '../application/state/useStoredViewMode';
 import { STORAGE_KEY_VAULT_SNIPPETS_VIEW_MODE } from '../infrastructure/config/storageKeys';
 import { cn } from '../lib/utils';
 import { Host, ShellHistoryEntry, Snippet, SSHKey } from '../types';
+import { ManagedSource } from '../domain/models';
 import { DistroAvatar } from './DistroAvatar';
 import SelectHostPanel from './SelectHostPanel';
 import { AsidePanel, AsidePanelContent } from './ui/aside-panel';
@@ -30,6 +31,7 @@ interface SnippetsManagerProps {
   onRunSnippet?: (snippet: Snippet, targetHosts: Host[]) => void;
   // Props for inline host creation
   availableKeys?: SSHKey[];
+  managedSources?: ManagedSource[];
   onSaveHost?: (host: Host) => void;
   onCreateGroup?: (groupPath: string) => void;
 }
@@ -49,6 +51,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
   onPackagesChange,
   onRunSnippet,
   availableKeys = [],
+  managedSources = [],
   onSaveHost,
   onCreateGroup,
 }) => {
@@ -67,6 +70,12 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
   const [newPackageName, setNewPackageName] = useState('');
   const [isPackageDialogOpen, setIsPackageDialogOpen] = useState(false);
 
+  // Rename package state
+  const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
+  const [renamingPackagePath, setRenamingPackagePath] = useState<string | null>(null);
+  const [renamePackageName, setRenamePackageName] = useState('');
+  const [renameError, setRenameError] = useState('');
+
   // Search, sort, and view mode state
   const [search, setSearch] = useState('');
   const [viewMode, setViewMode] = useStoredViewMode(
@@ -144,23 +153,60 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
 
   const displayedPackages = useMemo(() => {
     if (!selectedPackage) {
-      const roots = packages
+      // Separate absolute paths (starting with /) from relative paths
+      const absolutePaths = packages.filter(p => p.startsWith('/'));
+      const relativePaths = packages.filter(p => !p.startsWith('/'));
+      
+      const results: { name: string; path: string; count: number }[] = [];
+      
+      // Process relative paths (traditional behavior)
+      const relativeRoots = relativePaths
         .map((p) => p.split('/')[0])
-        .filter(Boolean);
-      return Array.from(new Set(roots)).map((name) => {
-        const path = name;
-        const count = snippets.filter((s) => (s.package || '') === path).length;
-        return { name, path, count };
+        .filter((name): name is string => Boolean(name) && name.length > 0);
+      
+      Array.from(new Set(relativeRoots)).forEach((name: string) => {
+        const path: string = name;
+        const count = snippets.filter((s) => {
+          const pkg = s.package || '';
+          return pkg === path || pkg.startsWith(path + '/');
+        }).length;
+        results.push({ name, path, count });
       });
+      
+      // Process absolute paths - show them as separate roots with "/" prefix
+      const absoluteRoots = absolutePaths
+        .map((p) => {
+          const cleanPath = p.substring(1); // Remove leading slash
+          const firstSegment = cleanPath.split('/')[0];
+          return firstSegment;
+        })
+        .filter((name): name is string => Boolean(name) && name.length > 0);
+      
+      Array.from(new Set(absoluteRoots)).forEach((name: string) => {
+        const path: string = `/${name}`;
+        const displayName: string = `/${name}`; // Show with leading slash to distinguish
+        const count = snippets.filter((s) => {
+          const pkg = s.package || '';
+          return pkg === path || pkg.startsWith(path + '/');
+        }).length;
+        results.push({ name: displayName, path, count });
+      });
+      
+      return results;
     }
+    
     const prefix = selectedPackage + '/';
     const children = packages
       .filter((p) => p.startsWith(prefix))
       .map((p) => p.replace(prefix, '').split('/')[0])
-      .filter(Boolean);
+      .filter((name): name is string => Boolean(name) && name.length > 0);
     return Array.from(new Set(children)).map((name) => {
       const path = `${selectedPackage}/${name}`;
-      const count = snippets.filter((s) => (s.package || '') === path).length;
+      // Count snippets in this package AND all nested packages
+      const count = snippets.filter((s) => {
+        const pkg = s.package || '';
+        return pkg === path || pkg.startsWith(path + '/');
+      }).length;
       return { name, path, count };
     });
   }, [packages, selectedPackage, snippets]);
@@ -191,28 +237,76 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
 
   const breadcrumb = useMemo(() => {
     if (!selectedPackage) return [];
+    const isAbsolute = selectedPackage.startsWith('/');
     const parts = selectedPackage.split('/').filter(Boolean);
-    return parts.map((name, idx) => ({ name, path: parts.slice(0, idx + 1).join('/') }));
+    return parts.map((name, idx) => {
+      const pathSegments = parts.slice(0, idx + 1);
+      const path = isAbsolute ? `/${pathSegments.join('/')}` : pathSegments.join('/');
+      return { name, path };
+    });
   }, [selectedPackage]);
 
   const createPackage = () => {
     const name = newPackageName.trim();
     if (!name) return;
-    const full = selectedPackage ? `${selectedPackage}/${name}` : name;
-    if (!packages.includes(full)) onPackagesChange([...packages, full]);
+    
+    // Allow leading slash and validate the rest - allow hyphens anywhere in package names
+    if (!/^\/?([\w-]+(\/[\w-]+)*)\/?$/.test(name)) {
+      // Could add toast notification here for invalid characters
+      return;
+    }
+    
+    // Normalize path construction to avoid double slashes
+    let full: string;
+    if (selectedPackage) {
+      // Strip leading slash from name when we're inside a package to avoid double slashes
+      const normalizedName = name.startsWith('/') ? name.substring(1) : name;
+      full = `${selectedPackage}/${normalizedName}`;
+    } else {
+      // At root level, preserve the leading slash if user intended it
+      full = name;
+    }
+
+    // Strip trailing slash to ensure consistent path handling
+    if (full.endsWith('/')) {
+      full = full.slice(0, -1);
+    }
+    
+    // Check for duplicate package names (case-insensitive)
+    const existingPackage = packages.find(p => p.toLowerCase() === full.toLowerCase());
+    if (existingPackage) {
+      // Could add toast notification here for duplicate package
+      return;
+    }
+    
+    onPackagesChange([...packages, full]);
     setNewPackageName('');
     setIsPackageDialogOpen(false);
   };
 
   const deletePackage = (path: string) => {
+    // Remove the package and all its children
     const keep = packages.filter((p) => !(p === path || p.startsWith(path + '/')));
+    
+    // Move all snippets from deleted packages to root
     const updatedSnippets = snippets.map((s) => {
       if (!s.package) return s;
-      if (s.package === path || s.package.startsWith(path + '/')) return { ...s, package: '' };
+      if (s.package === path || s.package.startsWith(path + '/')) {
+        return { ...s, package: '' };
+      }
       return s;
     });
+    
+    // Update packages first, then save snippets
     onPackagesChange(keep);
-    updatedSnippets.forEach(onSave);
+    
+    // Only save snippets that were actually modified
+    const modifiedSnippets = updatedSnippets.filter((s, index) => 
+      s.package !== snippets[index].package
+    );
+    modifiedSnippets.forEach(onSave);
+    
+    // Reset selected package if it was deleted
     if (selectedPackage && (selectedPackage === path || selectedPackage.startsWith(path + '/'))) {
       setSelectedPackage(null);
     }
@@ -220,24 +314,125 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
 
   const movePackage = (source: string, target: string | null) => {
     const name = source.split('/').pop() || '';
-    const newPath = target ? `${target}/${name}` : name;
+    const isAbsolute = source.startsWith('/');
+    const newPath = target ? `${target}/${name}` : (isAbsolute ? `/${name}` : name);
     if (newPath === source || newPath.startsWith(source + '/')) return;
+
+    // Check if target path already exists
+    if (packages.includes(newPath)) return;
+
     const updatedPackages = packages.map((p) => {
       if (p === source) return newPath;
-      if (p.startsWith(source + '/')) return p.replace(source, newPath);
+      // Use more precise replacement to avoid substring issues
+      if (p.startsWith(source + '/')) {
+        return newPath + p.substring(source.length);
+      }
       return p;
     });
+
     const updatedSnippets = snippets.map((s) => {
       if (!s.package) return s;
       if (s.package === source) return { ...s, package: newPath };
-      if (s.package.startsWith(source + '/')) return { ...s, package: s.package.replace(source, newPath) };
+      // Use more precise replacement to avoid substring issues
+      if (s.package.startsWith(source + '/')) {
+        return { ...s, package: newPath + s.package.substring(source.length) };
+      }
       return s;
     });
+
     onPackagesChange(Array.from(new Set(updatedPackages)));
     updatedSnippets.forEach(onSave);
     if (selectedPackage === source) setSelectedPackage(newPath);
   };
 
+  const openRenameDialog = (path: string) => {
+    const name = path.split('/').pop() || '';
+    setRenamingPackagePath(path);
+    setRenamePackageName(name);
+    setRenameError('');
+    setIsRenameDialogOpen(true);
+  };
+
+  const renamePackage = () => {
+    if (!renamingPackagePath) return;
+
+    const newName = renamePackageName.trim();
+
+    // Validate: empty name
+    if (!newName) {
+      setRenameError(t('snippets.renameDialog.error.empty'));
+      return;
+    }
+
+    // Validate: same rules as createPackage - only allow letters, numbers, hyphens, underscores
+    // Since we're renaming a single segment (no slashes allowed), use the segment-level pattern
+    if (!/^[\w-]+$/.test(newName)) {
+      setRenameError(t('snippets.renameDialog.error.invalidChars'));
+      return;
+    }
+
+    // Build new path
+    const parts = renamingPackagePath.split('/');
+    parts[parts.length - 1] = newName;
+    const newPath = parts.join('/');
+
+    // Validate: same name
+    if (newPath === renamingPackagePath) {
+      setIsRenameDialogOpen(false);
+      return;
+    }
+
+    // Validate: duplicate (case-insensitive)
+    const existingPackage = packages.find(p => p.toLowerCase() === newPath.toLowerCase());
+    if (existingPackage) {
+      setRenameError(t('snippets.renameDialog.error.duplicate'));
+      return;
+    }
+
+    // Update all packages with this path or nested under it
+    const updatedPackages = packages.map((p) => {
+      if (p === renamingPackagePath) return newPath;
+      if (p.startsWith(renamingPackagePath + '/')) {
+        return newPath + p.substring(renamingPackagePath.length);
+      }
+      return p;
+    });
+
+    // Update all snippets with this package or nested under it
+    const updatedSnippets = snippets.map((s) => {
+      if (!s.package) return s;
+      if (s.package === renamingPackagePath) return { ...s, package: newPath };
+      if (s.package.startsWith(renamingPackagePath + '/')) {
+        return { ...s, package: newPath + s.package.substring(renamingPackagePath.length) };
+      }
+      return s;
+    });
+
+    onPackagesChange(Array.from(new Set(updatedPackages)));
+    updatedSnippets.forEach(onSave);
+
+    // Update selected package if it was renamed
+    if (selectedPackage === renamingPackagePath) {
+      setSelectedPackage(newPath);
+    } else if (selectedPackage?.startsWith(renamingPackagePath + '/')) {
+      setSelectedPackage(newPath + selectedPackage.substring(renamingPackagePath.length));
+    }
+
+    // Update editingSnippet.package if it's in the renamed package (fixes stale state when editing)
+    if (editingSnippet.package) {
+      if (editingSnippet.package === renamingPackagePath) {
+        setEditingSnippet(prev => ({ ...prev, package: newPath }));
+      } else if (editingSnippet.package.startsWith(renamingPackagePath + '/')) {
+        setEditingSnippet(prev => ({
+          ...prev,
+          package: newPath + prev.package!.substring(renamingPackagePath.length)
+        }));
+      }
+    }
+
+    setIsRenameDialogOpen(false);
+  };
+
   const moveSnippet = (id: string, pkg: string | null) => {
     const sn = snippets.find((s) => s.id === id);
     if (!sn) return;
@@ -246,11 +441,36 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
 
   // Package options for Combobox
   const packageOptions: ComboboxOption[] = useMemo(() => {
-    return packages.map(p => ({
-      value: p,
-      label: p.includes('/') ? p.split('/').pop()! : p,
-      sublabel: p.includes('/') ? p : undefined,
-    }));
+    // Generate all possible parent paths for each package
+    const allPaths = new Set<string>();
+    
+    packages.forEach(pkg => {
+      // Add the full package path
+      allPaths.add(pkg);
+      
+      // Add all parent paths
+      const parts = pkg.split('/').filter(Boolean);
+      const isAbsolute = pkg.startsWith('/');
+      
+      for (let i = 1; i < parts.length; i++) {
+        const parentPath = (isAbsolute ? '/' : '') + parts.slice(0, i).join('/');
+        allPaths.add(parentPath);
+      }
+    });
+    
+    return Array.from(allPaths)
+      .sort((a, b) => {
+        // Sort by depth first (shorter paths first), then alphabetically
+        const depthA = (a.match(/\//g) || []).length;
+        const depthB = (b.match(/\//g) || []).length;
+        if (depthA !== depthB) return depthA - depthB;
+        return a.localeCompare(b);
+      })
+      .map(p => ({
+        value: p,
+        label: p.includes('/') ? p.split('/').pop()! : p,
+        sublabel: p.includes('/') ? p : undefined,
+      }));
   }, [packages]);
 
   // Shell history lazy loading
@@ -310,6 +530,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
           onBack={handleTargetPickerBack}
           onContinue={handleTargetPickerBack}
           availableKeys={availableKeys}
+          managedSources={managedSources}
           onSaveHost={onSaveHost}
           onCreateGroup={onCreateGroup}
           title={t('snippets.targets.add')}
@@ -354,7 +575,13 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
               <Combobox
                 options={packageOptions}
                 value={editingSnippet.package || selectedPackage || ''}
-                onValueChange={(val) => setEditingSnippet({ ...editingSnippet, package: val })}
+                onValueChange={(val) => {
+                  setEditingSnippet({ ...editingSnippet, package: val });
+                  // If selecting an implicit parent path, persist it to packages
+                  if (val && !packages.includes(val)) {
+                    onPackagesChange([...packages, val]);
+                  }
+                }}
                 placeholder={t('snippets.field.packagePlaceholder')}
                 allowCreate={true}
                 onCreateNew={(val) => {
@@ -565,12 +792,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>
         )}
@@ -624,6 +851,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
                     </ContextMenuTrigger>
                     <ContextMenuContent>
                       <ContextMenuItem onClick={() => setSelectedPackage(pkg.path)}>{t('action.open')}</ContextMenuItem>
+                      <ContextMenuItem onClick={() => openRenameDialog(pkg.path)}>{t('common.rename')}</ContextMenuItem>
                       <ContextMenuItem className="text-destructive" onClick={() => deletePackage(pkg.path)}>{t('action.delete')}</ContextMenuItem>
                     </ContextMenuContent>
                   </ContextMenu>
@@ -729,6 +957,8 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
                 value={newPackageName}
                 onChange={(e) => setNewPackageName(e.target.value)}
                 onKeyDown={(e) => e.key === 'Enter' && createPackage()}
+                pattern="^/?([\w-]+(/[\w-]+)*)?/?$"
+                title="Package names can contain letters, numbers, hyphens, underscores, and forward slashes. Can optionally start with /"
               />
               <p className="text-[11px] text-muted-foreground">{t('snippets.packageDialog.hint')}</p>
             </div>
@@ -742,6 +972,40 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
         </div>
       )}
 
+      {/* Rename Package Dialog */}
+      {isRenameDialogOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+          <Card className="w-full max-w-sm p-4 space-y-4">
+            <div>
+              <p className="text-sm font-semibold">{t('snippets.renameDialog.title')}</p>
+              <p className="text-xs text-muted-foreground">{t('snippets.renameDialog.currentPath', { path: renamingPackagePath })}</p>
+            </div>
+            <div className="space-y-2">
+              <Label>{t('field.name')}</Label>
+              <Input
+                autoFocus
+                placeholder={t('snippets.renameDialog.placeholder')}
+                value={renamePackageName}
+                onChange={(e) => {
+                  setRenamePackageName(e.target.value);
+                  setRenameError('');
+                }}
+                onKeyDown={(e) => e.key === 'Enter' && renamePackage()}
+              />
+              {renameError && (
+                <p className="text-[11px] text-destructive">{renameError}</p>
+              )}
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button variant="ghost" onClick={() => setIsRenameDialogOpen(false)}>
+                {t('common.cancel')}
+              </Button>
+              <Button onClick={renamePackage}>{t('common.rename')}</Button>
+            </div>
+          </Card>
+        </div>
+      )}
+
       {/* Right Panel */}
       {renderRightPanel()}
     </div>

components/Terminal.tsx

@@ -3,7 +3,7 @@ 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";
@@ -26,6 +26,7 @@ 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 { useAvailableFonts } from "../application/state/fontStore";
 import { TERMINAL_THEMES } from "../infrastructure/config/terminalThemes";
@@ -34,13 +35,64 @@ 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";
+import { extractDropEntries, getPathForFile, DropEntry } from "../lib/sftpFileUtils";
+
+/**
+ * Extract unique root paths from drop entries for local terminal path insertion.
+ * For nested files, extracts the root folder path; for single files, uses the full path.
+ * Paths with spaces are quoted.
+ */
+function extractRootPathsFromDropEntries(dropEntries: DropEntry[]): string[] {
+  const paths: string[] = [];
+  const seenPaths = new Set<string>();
+
+  for (const entry of dropEntries) {
+    if (!entry.file) continue;
+
+    const fullPath = getPathForFile(entry.file);
+    if (!fullPath) continue;
+
+    const pathParts = entry.relativePath.split('/');
+
+    if (pathParts.length > 1) {
+      // Nested file in a folder - extract the root folder path
+      const rootFolderName = pathParts[0];
+      const separator = fullPath.includes('\\') ? '\\' : '/';
+
+      // Find the position of the root folder name in the full path
+      const rootFolderIndex = fullPath.lastIndexOf(separator + rootFolderName + separator);
+      const altRootFolderIndex = fullPath.lastIndexOf(separator + rootFolderName);
+      const folderStartIndex = rootFolderIndex !== -1
+        ? rootFolderIndex + 1
+        : (altRootFolderIndex !== -1 ? altRootFolderIndex + 1 : -1);
+
+      if (folderStartIndex !== -1) {
+        const folderEndIndex = folderStartIndex + rootFolderName.length;
+        const folderPath = fullPath.substring(0, folderEndIndex);
+
+        if (!seenPaths.has(folderPath)) {
+          paths.push(folderPath.includes(' ') ? `"${folderPath}"` : folderPath);
+          seenPaths.add(folderPath);
+        }
+      }
+    } else {
+      // Single file (not in a folder)
+      if (!seenPaths.has(fullPath)) {
+        paths.push(fullPath.includes(' ') ? `"${fullPath}"` : fullPath);
+        seenPaths.add(fullPath);
+      }
+    }
+  }
+
+  return paths;
+}
 
 interface TerminalProps {
   host: Host;
@@ -88,6 +140,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,
@@ -149,12 +214,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);
@@ -196,6 +262,11 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     currentHostLabel: string;
   } | null>(null);
 
+  // Drag and drop state
+  const [isDraggingOver, setIsDraggingOver] = useState(false);
+  const dragCounterRef = useRef(0);
+  const [pendingUploadEntries, setPendingUploadEntries] = useState<DropEntry[]>([]);
+
   const terminalSearch = useTerminalSearch({ searchAddonRef, termRef });
   const {
     isSearchOpen,
@@ -208,6 +279,19 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     handleCloseSearch,
   } = terminalSearch;
 
+  // Check if this is a local or serial connection (doesn't need connection dialog during connecting)
+  const isLocalConnection = host.protocol === "local";
+  const isSerialConnection = host.protocol === "serial";
+
+  // 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;
@@ -298,7 +382,6 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     disposeExitRef,
     fitAddonRef,
     serializeAddonRef,
-    highlightProcessorRef,
     pendingAuthRef,
     updateStatus,
     setStatus,
@@ -427,8 +510,11 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   useEffect(() => {
     if (status !== "connecting" || auth.needsAuth) return;
 
+    // Local terminal and serial connections don't need timeout/progress UI
+    if (isLocalConnection || isSerialConnection) return;
+
     // Only show SSH-specific scripted logs for SSH connections
-    const isSSH = host.protocol !== "serial" && host.protocol !== "local" && host.protocol !== "telnet" && host.hostname !== "localhost";
+    const isSSH = host.protocol !== "telnet";
 
     let stepTimer: ReturnType<typeof setInterval> | undefined;
     if (isSSH) {
@@ -525,7 +611,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
@@ -601,6 +698,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 {
@@ -618,7 +736,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;
@@ -828,6 +946,95 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     }
   };
 
+  // Drag and drop handlers
+  const handleDragEnter = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current++;
+    if (e.dataTransfer.types.includes('Files')) {
+      setIsDraggingOver(true);
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer.types.includes('Files')) {
+      e.dataTransfer.dropEffect = 'copy';
+    }
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
+    if (dragCounterRef.current === 0) {
+      setIsDraggingOver(false);
+    }
+  };
+
+  const handleDrop = async (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current = 0;
+    setIsDraggingOver(false);
+
+    if (!e.dataTransfer.types.includes('Files')) {
+      return;
+    }
+
+    // Only handle drops on connected terminals
+    if (status !== 'connected') {
+      toast.error(t("terminal.dragDrop.notConnected"), t("terminal.dragDrop.errorTitle"));
+      return;
+    }
+
+    try {
+      const dropEntries = await extractDropEntries(e.dataTransfer);
+      
+      if (dropEntries.length === 0) {
+        return;
+      }
+
+      if (isLocalConnection) {
+        // Local terminal: Insert absolute paths
+        const paths = extractRootPathsFromDropEntries(dropEntries);
+
+        if (paths.length > 0 && termRef.current && sessionRef.current) {
+          const pathsText = paths.join(' ');
+          // Write the paths to the terminal
+          terminalBackend.writeToSession(sessionRef.current, pathsText);
+          termRef.current.focus();
+        }
+      } else {
+        // Remote terminal: Trigger SFTP upload
+        // Get current working directory for SFTP initial path
+        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
+          }
+        }
+
+        setPendingUploadEntries(dropEntries);
+        // Use flushSync to ensure sftpInitialPath is updated synchronously
+        // before setShowSFTP(true) triggers the modal open
+        flushSync(() => {
+          setSftpInitialPath(initialPath);
+        });
+        setShowSFTP(true);
+      }
+    } catch (error) {
+      logger.error("Failed to handle file drop", error);
+      toast.error(t("terminal.dragDrop.errorMessage"), t("terminal.dragDrop.errorTitle"));
+    }
+  };
+
   const renderControls = (opts?: { showClose?: boolean }) => (
     <TerminalToolbar
       status={status}
@@ -864,6 +1071,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     <TerminalContextMenu
       hasSelection={hasSelection}
       hotkeyScheme={hotkeyScheme}
+      keyBindings={keyBindings}
       rightClickBehavior={terminalSettings?.rightClickBehavior}
       onCopy={terminalContextActions.onCopy}
       onPaste={terminalContextActions.onPaste}
@@ -874,7 +1082,34 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       onSplitVertical={onSplitVertical}
       onClose={inWorkspace ? () => onCloseSession?.(sessionId) : undefined}
     >
-      <div className="relative h-full w-full flex overflow-hidden bg-gradient-to-br from-[#050910] via-[#06101a] to-[#0b1220]">
+      <div 
+        className="relative h-full w-full flex overflow-hidden bg-gradient-to-br from-[#050910] via-[#06101a] to-[#0b1220]"
+        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        {/* Drag and drop overlay */}
+        {isDraggingOver && (
+          <div className="absolute inset-0 z-50 bg-blue-600/20 backdrop-blur-sm border-4 border-dashed border-blue-400 pointer-events-none flex items-center justify-center">
+            <div className="bg-background/90 backdrop-blur-md rounded-lg shadow-lg p-6 border border-border">
+              <div className="text-center">
+                <div className="text-lg font-semibold mb-2">
+                  {isLocalConnection 
+                    ? t("terminal.dragDrop.localTitle")
+                    : t("terminal.dragDrop.remoteTitle")
+                  }
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  {isLocalConnection 
+                    ? t("terminal.dragDrop.localMessage")
+                    : t("terminal.dragDrop.remoteMessage")
+                  }
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
         <div className="absolute left-0 right-0 top-0 z-20 pointer-events-none">
           <div
             className="flex items-center gap-1 px-2 py-0.5 backdrop-blur-md pointer-events-auto min-w-0 border-b-[0.5px]"
@@ -898,6 +1133,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 && (
@@ -979,7 +1474,10 @@ const TerminalComponent: React.FC<TerminalProps> = ({
             </div>
           )}
 
-          {status !== "connected" && !needsHostKeyVerification && (
+          {/* Connection dialog: skip for local/serial during connecting phase, but show on error */}
+          {status !== "connected" && !needsHostKeyVerification && !(
+            (isLocalConnection || isSerialConnection) && status === "connecting"
+          ) && (
             <TerminalConnectionDialog
               host={host}
               status={status}
@@ -1084,8 +1582,12 @@ const TerminalComponent: React.FC<TerminalProps> = ({
             };
           })()}
           open={showSFTP && status === "connected"}
-          onClose={() => setShowSFTP(false)}
+          onClose={() => {
+            setShowSFTP(false);
+            setPendingUploadEntries([]);
+          }}
           initialPath={sftpInitialPath}
+          initialEntriesToUpload={pendingUploadEntries}
         />
       </div>
     </TerminalContextMenu>

components/TextEditorModal.tsx

@@ -7,7 +7,7 @@ import {
   Search,
   X,
 } from 'lucide-react';
-import Editor, { type OnMount, loader } from '@monaco-editor/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';
 
@@ -82,6 +82,50 @@ const languageIdToMonaco = (langId: string): string => {
   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,
@@ -90,12 +134,13 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
   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());
 
@@ -104,13 +149,49 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
     document.documentElement.classList.contains('dark')
   );
 
-  // Listen for theme changes via MutationObserver on <html> class
+  // 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 observer = new MutationObserver(() => {
+    const updateTheme = () => {
       setIsDarkTheme(root.classList.contains('dark'));
-    });
-    observer.observe(root, { attributes: true, attributeFilter: ['class'] });
+      setBgColor(getBackgroundColor());
+    };
+    const observer = new MutationObserver(updateTheme);
+    observer.observe(root, { attributes: true, attributeFilter: ['class', 'style'] });
     return () => observer.disconnect();
   }, []);
 
@@ -185,7 +266,6 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
 
   const supportedLanguages = useMemo(() => getSupportedLanguages(), []);
   const monacoLanguage = useMemo(() => languageIdToMonaco(languageId), [languageId]);
-  const monacoTheme = isDarkTheme ? 'vs-dark' : 'light';
   const languageOptions = useMemo(
     () => supportedLanguages.map((lang) => ({ value: lang.id, label: lang.name })),
     [supportedLanguages],
@@ -265,7 +345,7 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
             value={content}
             onChange={handleEditorChange}
             onMount={handleEditorMount}
-            theme={monacoTheme}
+            theme={customThemeName}
             loading={
               <div className="absolute inset-0 flex items-center justify-center bg-background">
                 <Loader2 size={32} className="animate-spin text-muted-foreground" />

components/TopTabs.tsx

@@ -25,6 +25,7 @@ interface TopTabsProps {
   isMacClient: boolean;
   onCloseSession: (sessionId: string, e?: React.MouseEvent) => void;
   onRenameSession: (sessionId: string) => void;
+  onCopySession: (sessionId: string) => void;
   onRenameWorkspace: (workspaceId: string) => void;
   onCloseWorkspace: (workspaceId: string) => void;
   onCloseLogView: (logViewId: string) => void;
@@ -121,6 +122,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
   isMacClient,
   onCloseSession,
   onRenameSession,
+  onCopySession,
   onRenameWorkspace,
   onCloseWorkspace,
   onCloseLogView,
@@ -410,6 +412,9 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
               <ContextMenuItem onClick={() => onRenameSession(session.id)}>
                 {t('common.rename')}
               </ContextMenuItem>
+              <ContextMenuItem onClick={() => onCopySession(session.id)}>
+                {t('tabs.copyTab')}
+              </ContextMenuItem>
               <ContextMenuItem className="text-destructive" onClick={() => onCloseSession(session.id)}>
                 {t('common.close')}
               </ContextMenuItem>

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/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

@@ -29,7 +29,7 @@ const getOpenerLabel = (
 export default function SettingsFileAssociationsTab() {
   const { t } = useI18n();
   const { getAllAssociations, removeAssociation, setOpenerForExtension } = useSftpFileAssociations();
-  const { sftpDoubleClickBehavior, setSftpDoubleClickBehavior, sftpAutoSync, setSftpAutoSync, sftpShowHiddenFiles, setSftpShowHiddenFiles } = useSettingsState();
+  const { sftpDoubleClickBehavior, setSftpDoubleClickBehavior, sftpAutoSync, setSftpAutoSync, sftpShowHiddenFiles, setSftpShowHiddenFiles, sftpUseCompressedUpload, setSftpUseCompressedUpload } = useSettingsState();
   const associations = getAllAssociations();
   const [editingExtension, setEditingExtension] = useState<string | null>(null);
 
@@ -213,6 +213,46 @@ export default function SettingsFileAssociationsTab() {
           </button>
         </div>
 
+        {/* Compressed folder upload section */}
+        <div className="space-y-4">
+          <SectionHeader title={t('settings.sftp.compressedUpload')} />
+          <p className="text-sm text-muted-foreground">
+            {t('settings.sftp.compressedUpload.desc')}
+          </p>
+          <button
+            onClick={() => setSftpUseCompressedUpload(!sftpUseCompressedUpload)}
+            className={cn(
+              "w-full text-left p-4 rounded-lg border-2 transition-colors",
+              sftpUseCompressedUpload
+                ? "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",
+                sftpUseCompressedUpload
+                  ? "border-primary bg-primary"
+                  : "border-muted-foreground/30"
+              )}>
+                {sftpUseCompressedUpload && (
+                  <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.compressedUpload.enable')}
+                </Label>
+                <p className="text-sm text-muted-foreground">
+                  {t('settings.sftp.compressedUpload.enableDesc')}
+                </p>
+              </div>
+            </div>
+          </button>
+        </div>
+
         {/* File associations section */}
         <div className="space-y-4">
           <SectionHeader title={t('settings.sftpFileAssociations.title')} />

components/settings/tabs/SettingsSystemTab.tsx

@@ -1,12 +1,14 @@
 /**
- * Settings System Tab - System information and temp file management
+ * Settings System Tab - System information, temp file management, and session logs
  */
-import { FolderOpen, HardDrive, RefreshCw, Trash2 } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+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;
@@ -22,9 +24,25 @@ function formatBytes(bytes: number): string {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
 }
 
-const SettingsSystemTab: React.FC = () => {
+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);
@@ -33,7 +51,7 @@ const SettingsSystemTab: React.FC = () => {
   const loadTempDirInfo = useCallback(async () => {
     const bridge = netcattyBridge.get();
     if (!bridge?.getTempDirInfo) return;
-    
+
     setIsLoading(true);
     try {
       const info = await bridge.getTempDirInfo();
@@ -52,7 +70,7 @@ const SettingsSystemTab: React.FC = () => {
   const handleClearTempFiles = useCallback(async () => {
     const bridge = netcattyBridge.get();
     if (!bridge?.clearTempDir) return;
-    
+
     setIsClearing(true);
     setClearResult(null);
     try {
@@ -73,6 +91,37 @@ const SettingsSystemTab: React.FC = () => {
     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"
@@ -171,6 +220,81 @@ const SettingsSystemTab: React.FC = () => {
               {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>

components/settings/tabs/SettingsTerminalTab.tsx

@@ -17,6 +17,7 @@ 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";
 
 // Theme preview button component
 const ThemePreviewButton: React.FC<{
@@ -207,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={availableFonts.map((f) => ({ value: f.id, label: f.name }))}
+            fonts={availableFonts}
             onChange={(id) => setTerminalFontFamilyId(id)}
-            className="w-40"
+            className="w-48"
           />
         </SettingRow>
 
@@ -608,6 +609,62 @@ export default function SettingsTerminalTab(props: {
           />
         </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,428 @@
+import React from "react";
+import { Download, Edit2, Folder, FolderOpen, FolderUp, 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;
+  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>;
+  folderInputRef: 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) => string;
+}
+
+export const SftpModalFileList: React.FC<SftpModalFileListProps> = ({
+  t,
+  currentPath,
+  isLocalSession,
+  files,
+  selectedFiles,
+  dragActive,
+  loading,
+  loadingTextContent,
+  reconnecting,
+  columnWidths,
+  sortField,
+  sortOrder,
+  shouldVirtualize,
+  totalHeight,
+  visibleRows,
+  fileListRef,
+  inputRef,
+  folderInputRef,
+  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)}
+                      </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={() => folderInputRef.current?.click()}>
+            <FolderUp className="h-4 w-4 mr-2" /> {t("sftp.uploadFolder")}
+          </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,339 @@
+import React from "react";
+import { ArrowUp, Check, ChevronRight, FilePlus, FolderPlus, FolderUp, Home, Languages, MoreHorizontal, 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 { Popover, PopoverClose, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
+
+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>;
+  folderInputRef: React.RefObject<HTMLInputElement>;
+  pathInputRef: React.RefObject<HTMLInputElement>;
+  uploading: boolean;
+  onTriggerUpload: () => void;
+  onTriggerFolderUpload: () => void;
+  onCreateFolder: () => void;
+  onCreateFile: () => void;
+  onFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onFolderSelect: (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,
+  folderInputRef,
+  pathInputRef,
+  uploading,
+  onTriggerUpload,
+  onTriggerFolderUpload,
+  onCreateFolder,
+  onCreateFile,
+  onFileSelect,
+  onFolderSelect,
+}) => (
+  <>
+    <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>
+
+    <TooltipProvider delayDuration={300}>
+    <div className="px-4 py-2 border-b border-border/60 flex items-center gap-2 flex-shrink-0 bg-muted/30">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={onUp}
+            disabled={isAtRoot}
+          >
+            <ArrowUp size={14} />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{t("sftp.nav.up")}</TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={onHome}
+          >
+            <Home size={14} />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{t("sftp.nav.home")}</TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={onRefresh}
+          >
+            <RefreshCw
+              size={14}
+              className={cn(isRefreshing && "animate-spin")}
+            />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{t("sftp.nav.refresh")}</TooltipContent>
+      </Tooltip>
+      {showEncoding && (
+        <Popover>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                >
+                  <Languages size={14} />
+                </Button>
+              </PopoverTrigger>
+            </TooltipTrigger>
+            <TooltipContent>{t("sftp.encoding.label")}</TooltipContent>
+          </Tooltip>
+          <PopoverContent className="w-36 p-1" align="start">
+            {(["auto", "utf-8", "gb18030"] as const).map((encoding) => (
+              <PopoverClose asChild key={encoding}>
+                <button
+                  className={cn(
+                    "w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-secondary transition-colors",
+                    filenameEncoding === encoding && "bg-secondary"
+                  )}
+                  onClick={() => onFilenameEncodingChange(encoding)}
+                >
+                  <Check
+                    size={14}
+                    className={cn(
+                      "shrink-0",
+                      filenameEncoding === encoding ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  {t(`sftp.encoding.${encoding === "utf-8" ? "utf8" : encoding}`)}
+                </button>
+              </PopoverClose>
+            ))}
+          </PopoverContent>
+        </Popover>
+      )}
+
+      <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-1 ml-auto">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-7 w-7"
+                onClick={onTriggerUpload}
+                disabled={uploading}
+              >
+                <Upload size={14} />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("sftp.upload")}</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-7 w-7"
+                onClick={onTriggerFolderUpload}
+                disabled={uploading}
+              >
+                <FolderUp size={14} />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("sftp.uploadFolder")}</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-7 w-7"
+                onClick={onCreateFolder}
+              >
+                <FolderPlus size={14} />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("sftp.newFolder")}</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-7 w-7"
+                onClick={onCreateFile}
+              >
+                <FilePlus size={14} />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("sftp.newFile")}</TooltipContent>
+          </Tooltip>
+        <input
+          type="file"
+          className="hidden"
+          ref={inputRef}
+          onChange={onFileSelect}
+          multiple
+        />
+        <input
+          type="file"
+          className="hidden"
+          ref={folderInputRef}
+          onChange={onFolderSelect}
+          webkitdirectory=""
+          multiple
+        />
+        </div>
+    </div>
+    </TooltipProvider>
+  </>
+);

components/sftp-modal/SftpModalUploadTasks.tsx

@@ -0,0 +1,210 @@
+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;
+
+  // Helper function to get localized display name for compressed uploads
+  const getDisplayName = (task: UploadTask) => {
+    // Check for explicit phase marker format: "folderName|phase"
+    // This is the format sent by uploadService.ts for compressed uploads
+    if (task.fileName.includes('|')) {
+      const pipeIndex = task.fileName.lastIndexOf('|');
+      const baseName = task.fileName.substring(0, pipeIndex);
+      const phase = task.fileName.substring(pipeIndex + 1);
+
+      if (phase === 'compressing' || phase === 'extracting' || phase === 'uploading' || phase === 'compressed') {
+        const phaseLabel = t(`sftp.upload.phase.${phase}`);
+        return `${baseName} (${phaseLabel})`;
+      }
+    }
+
+    // Check for exact matches of phase status strings (legacy support)
+    if (task.fileName === t('sftp.upload.compressing') || task.fileName === 'Compressing...' || task.fileName === 'Compressing') {
+      return t('sftp.upload.compressing');
+    }
+    if (task.fileName === t('sftp.upload.extracting') || task.fileName === 'Extracting...' || task.fileName === 'Extracting') {
+      return t('sftp.upload.extracting');
+    }
+    if (task.fileName === t('sftp.upload.scanning') || task.fileName === 'Scanning files...' || task.fileName === 'Scanning files') {
+      return t('sftp.upload.scanning');
+    }
+
+    // Check if this is a compressed upload task (legacy format)
+    if (task.fileName.includes('(compressed)')) {
+      const baseName = task.fileName.replace(' (compressed)', '');
+      return `${baseName} (${t('sftp.upload.compressed')})`;
+    }
+
+    return task.fileName;
+  };
+
+  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">
+                    {getDisplayName(task)}
+                  </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">
+                    {t("sftp.upload.completed")} - {formatBytes(task.totalBytes)}
+                  </div>
+                )}
+                {task.status === "cancelled" && (
+                  <div className="text-[10px] text-muted-foreground mt-0.5">
+                    {t("sftp.upload.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,630 @@
+import React, { useCallback, useState, useRef, useMemo } from "react";
+import type { RemoteFile } from "../../../types";
+import { toast } from "../../ui/toast";
+import {
+  UploadController,
+  uploadFromDataTransfer,
+  uploadFromFileList,
+  uploadEntriesDirect,
+  UploadBridge,
+  UploadCallbacks,
+  UploadTaskInfo,
+  UploadProgress,
+} from "../../../lib/uploadService";
+import { DropEntry } from "../../../lib/sftpFileUtils";
+
+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<{ success: boolean; transferId: string; cancelled?: 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>;
+  startStreamTransfer?: (
+    options: {
+      transferId: string;
+      sourcePath: string;
+      targetPath: string;
+      sourceType: 'local' | 'sftp';
+      targetType: 'local' | 'sftp';
+      sourceSftpId?: string;
+      targetSftpId?: string;
+      totalBytes?: number;
+    },
+    onProgress?: (transferred: number, total: number, speed: number) => void,
+    onComplete?: () => void,
+    onError?: (error: string) => void
+  ) => Promise<{ transferId: string; totalBytes?: number; error?: string }>;
+  cancelTransfer?: (transferId: string) => Promise<void>;
+  setLoading: (loading: boolean) => void;
+  t: (key: string, params?: Record<string, unknown>) => string;
+  useCompressedUpload?: boolean; // Enable compressed folder uploads
+}
+
+interface UseSftpModalTransfersResult {
+  uploading: boolean;
+  uploadTasks: UploadTask[];
+  dragActive: boolean;
+  handleDownload: (file: RemoteFile) => Promise<void>;
+  handleUploadMultiple: (fileList: FileList) => Promise<void>;
+  handleUploadFromDrop: (dataTransfer: DataTransfer) => Promise<void>;
+  handleUploadEntries: (entries: DropEntry[]) => Promise<void>;
+  handleFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleFolderSelect: (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,
+  startStreamTransfer,
+  cancelTransfer,
+  setLoading,
+  t,
+  useCompressedUpload = false,
+}: 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());
+
+  // 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,
+            onComplete || (() => { }),
+            onError || (() => { })
+          );
+          
+          // Check if this transfer was cancelled
+          const wasCancelled = cancelledTransferIdsRef.current.has(taskId);
+          if (wasCancelled) {
+            cancelledTransferIdsRef.current.delete(taskId);
+          }
+          return { success: result.success, transferId: result.transferId, cancelled: wasCancelled || result.cancelled };
+        } 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, transferId: taskId, cancelled: true };
+          }
+          // Real error - propagate it by re-throwing
+          throw error;
+        }
+      },
+      cancelSftpUpload,
+      startStreamTransfer: startStreamTransfer ? async (
+        options,
+        onProgress,
+        onComplete,
+        onError
+      ) => {
+        try {
+          const result = await startStreamTransfer(options, onProgress, onComplete, onError);
+          const wasCancelled = cancelledTransferIdsRef.current.has(options.transferId);
+          if (wasCancelled) {
+            cancelledTransferIdsRef.current.delete(options.transferId);
+          }
+          // Handle case where result might be undefined (bridge not available)
+          if (!result) {
+            return { transferId: options.transferId, error: 'Stream transfer not available' };
+          }
+          return { ...result, cancelled: wasCancelled };
+        } catch (error) {
+          const wasCancelled = cancelledTransferIdsRef.current.has(options.transferId);
+          if (wasCancelled) {
+            cancelledTransferIdsRef.current.delete(options.transferId);
+            return { transferId: options.transferId, cancelled: true };
+          }
+          return { transferId: options.transferId, error: error instanceof Error ? error.message : String(error) };
+        }
+      } : undefined,
+      cancelTransfer,
+    };
+  }, [writeLocalFile, mkdirLocal, mkdirSftp, writeSftpBinary, writeSftpBinaryWithProgress, cancelSftpUpload, startStreamTransfer, cancelTransfer]);
+
+  // Create upload callbacks
+  const createUploadCallbacks = useCallback((): UploadCallbacks => {
+    return {
+      onScanningStart: (taskId: string) => {
+        const scanningTask: UploadTask = {
+          id: taskId,
+          fileName: t("sftp.upload.scanning"),
+          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: "pending",
+          progress: 0,
+          totalBytes: task.totalBytes,
+          transferredBytes: 0,
+          speed: 0,
+          startTime: Date.now(),
+          isDirectory: task.isDirectory,
+        };
+        setUploadTasks(prev => [...prev, uploadTask]);
+      },
+      onTaskProgress: (taskId: string, progress: UploadProgress) => {
+        setUploadTasks(prev =>
+          prev.map(task => {
+            if (task.id !== taskId) return task;
+
+            // Don't update progress if task is already completed, failed, or cancelled
+            if (task.status === "completed" || task.status === "failed" || task.status === "cancelled") {
+              return task;
+            }
+            
+            return {
+              ...task,
+              status: "uploading" as const,
+              progress: progress.percent,
+              transferredBytes: progress.transferred,
+              speed: progress.speed,
+            };
+          })
+        );
+      },
+      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) => {
+        setUploadTasks(prev =>
+          prev.map(task =>
+            task.id === taskId
+              ? {
+                ...task,
+                status: "failed" as const,
+                speed: 0,
+                error,
+              }
+              : task
+          )
+        );
+      },
+      onTaskCancelled: (taskId: string) => {
+        setUploadTasks(prev =>
+          prev.map(task =>
+            task.id === taskId
+              ? {
+                ...task,
+                status: "cancelled" as const,
+                speed: 0,
+              }
+              : task
+          )
+        );
+      },
+      onTaskNameUpdate: (taskId: string, newName: string) => {
+        // Parse the phase format: "folderName|phase"
+        let displayName = newName;
+        if (newName.includes('|')) {
+          const [folderName, phase] = newName.split('|');
+          const phaseLabel = phase === 'compressing' ? t('sftp.upload.phase.compressing')
+            : phase === 'extracting' ? t('sftp.upload.phase.extracting')
+            : phase === 'uploading' ? t('sftp.upload.phase.uploading')
+            : t('sftp.upload.phase.compressed');
+          displayName = `${folderName} (${phaseLabel})`;
+        }
+        setUploadTasks(prev =>
+          prev.map(task =>
+            task.id === taskId
+              ? {
+                ...task,
+                fileName: displayName,
+              }
+              : task
+          )
+        );
+      },
+    };
+  }, [t]);
+
+  // Helper function to perform upload with compression setting from user preference
+  const performUpload = useCallback(async (
+    files: FileList | File[],
+    useCompressed: boolean
+  ): Promise<void> => {
+    if (files.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(
+        files,
+        {
+          targetPath: currentPath,
+          sftpId,
+          isLocal: isLocalSession,
+          bridge: createUploadBridge,
+          joinPath,
+          callbacks,
+          useCompressedUpload: useCompressed,
+        },
+        controller
+      );
+
+      await loadFiles(currentPath, { force: true });
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : t("sftp.error.uploadFailed"),
+        "SFTP"
+      );
+    } finally {
+      // Upload process is complete - clear uploading state and controller
+      setUploading(false);
+      uploadControllerRef.current = null;
+      cachedSftpIdRef.current = null;
+    }
+  }, [currentPath, createUploadBridge, createUploadCallbacks, ensureSftp, isLocalSession, joinPath, loadFiles, t]);
+
+  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],
+  );
+
+
+
+  const handleUploadMultiple = useCallback(
+    async (fileList: FileList) => {
+      if (fileList.length === 0) return;
+
+      // Use compressed upload if enabled in settings (auto-fallback is handled in uploadService)
+      await performUpload(fileList, useCompressedUpload);
+    },
+    [performUpload, useCompressedUpload],
+  );
+
+  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,
+            useCompressedUpload,
+          },
+          controller
+        );
+
+        await loadFiles(currentPath, { force: true });
+      } catch (error) {
+        toast.error(
+          error instanceof Error ? error.message : t("sftp.error.uploadFailed"),
+          "SFTP"
+        );
+      } finally {
+        // Upload process is complete - clear uploading state and controller
+        setUploading(false);
+        uploadControllerRef.current = null;
+        cachedSftpIdRef.current = null;
+      }
+    },
+    [currentPath, createUploadBridge, createUploadCallbacks, ensureSftp, isLocalSession, joinPath, loadFiles, t, useCompressedUpload],
+  );
+
+  // Handle upload from DropEntry array (used for drag-and-drop to terminal)
+  const handleUploadEntries = useCallback(
+    async (entries: DropEntry[]) => {
+      if (entries.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 uploadEntriesDirect(
+          entries,
+          {
+            targetPath: currentPath,
+            sftpId,
+            isLocal: isLocalSession,
+            bridge: createUploadBridge,
+            joinPath,
+            callbacks,
+            useCompressedUpload,
+          },
+          controller
+        );
+
+        await loadFiles(currentPath, { force: true });
+      } catch (error) {
+        toast.error(
+          error instanceof Error ? error.message : t("sftp.error.uploadFailed"),
+          "SFTP"
+        );
+      } finally {
+        // Upload process is complete - clear uploading state and controller
+        setUploading(false);
+        uploadControllerRef.current = null;
+        cachedSftpIdRef.current = null;
+      }
+    },
+    [currentPath, createUploadBridge, createUploadCallbacks, ensureSftp, isLocalSession, joinPath, loadFiles, t, useCompressedUpload],
+  );
+
+  // Handle upload from File array (used by file input after copying files)
+  const handleUploadFromFiles = useCallback(
+    async (files: File[]) => {
+      if (files.length === 0) return;
+
+      // Use compressed upload if enabled in settings (auto-fallback is handled in uploadService)
+      await performUpload(files, useCompressedUpload);
+    },
+    [performUpload, useCompressedUpload],
+  );
+
+  const handleFileSelect = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files && e.target.files.length > 0) {
+        // Copy the files before clearing the input, because clearing the input
+        // will also clear the FileList reference
+        const files = Array.from(e.target.files);
+        // Clear input first to allow selecting the same files again
+        e.target.value = "";
+        // Now start the upload with the copied files
+        void handleUploadFromFiles(files);
+      } else {
+        e.target.value = "";
+      }
+    },
+    [handleUploadFromFiles],
+  );
+
+  const handleFolderSelect = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files && e.target.files.length > 0) {
+        // Copy the files before clearing the input, because clearing the input
+        // will also clear the FileList reference
+        const files = Array.from(e.target.files);
+        // Clear input first to allow selecting the same folder again
+        e.target.value = "";
+        // Now start the upload with the copied files
+        void handleUploadFromFiles(files);
+      } else {
+        e.target.value = "";
+      }
+    },
+    [handleUploadFromFiles],
+  );
+
+  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
+      );
+    });
+
+    // 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,
+    handleUploadEntries,
+    handleFileSelect,
+    handleFolderSelect,
+    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,16 @@
+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): string => {
+  if (!dateStr) return "--";
+  const date = typeof dateStr === "number" ? new Date(dateStr) : new Date(dateStr);
+  if (isNaN(date.getTime())) return String(dateStr);
+  const pad = (value: number) => value.toString().padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+};

components/sftp/SftpContext.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { createContext, useContext, useMemo, useSyncExternalStore } from "react";
-import { Host, SftpFileEntry } from "../../types";
+import { Host, SftpFileEntry, SftpFilenameEncoding } from "../../types";
 
 // Types for the context
 export interface SftpPaneCallbacks {
@@ -16,6 +16,7 @@ export interface SftpPaneCallbacks {
     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;

components/sftp/SftpHostPicker.tsx

@@ -38,9 +38,11 @@ const SftpHostPickerInner: 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');

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/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,
+  };
+};

components/sftp/hooks/useSftpPaneDragAndSelect.ts

@@ -0,0 +1,206 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import type { SftpFileEntry } from "../../../types";
+import type { SftpPaneCallbacks, SftpDragCallbacks } from "../SftpContext";
+import { isNavigableDirectory } from "../index";
+
+interface UseSftpPaneDragAndSelectParams {
+  side: "left" | "right";
+  pane: { selectedFiles: Set<string> };
+  sortedDisplayFiles: SftpFileEntry[];
+  draggedFiles: { name: string; isDirectory: boolean; side: "left" | "right" }[] | null;
+  onDragStart: SftpDragCallbacks["onDragStart"];
+  onReceiveFromOtherPane: SftpPaneCallbacks["onReceiveFromOtherPane"];
+  onUploadExternalFiles?: SftpPaneCallbacks["onUploadExternalFiles"];
+  onOpenEntry: SftpPaneCallbacks["onOpenEntry"];
+  onRangeSelect: SftpPaneCallbacks["onRangeSelect"];
+  onToggleSelection: SftpPaneCallbacks["onToggleSelection"];
+}
+
+interface UseSftpPaneDragAndSelectResult {
+  dragOverEntry: string | null;
+  isDragOverPane: boolean;
+  paneContainerRef: React.RefObject<HTMLDivElement>;
+  handlePaneDragOver: (e: React.DragEvent) => void;
+  handlePaneDragLeave: (e: React.DragEvent) => void;
+  handlePaneDrop: (e: React.DragEvent) => Promise<void>;
+  handleFileDragStart: (entry: SftpFileEntry, e: React.DragEvent) => void;
+  handleEntryDragOver: (entry: SftpFileEntry, e: React.DragEvent) => void;
+  handleEntryDrop: (entry: SftpFileEntry, e: React.DragEvent) => void;
+  handleRowDragLeave: () => void;
+  handleRowSelect: (entry: SftpFileEntry, index: number, e: React.MouseEvent) => void;
+  handleRowOpen: (entry: SftpFileEntry) => void;
+}
+
+export const useSftpPaneDragAndSelect = ({
+  side,
+  pane,
+  sortedDisplayFiles,
+  draggedFiles,
+  onDragStart,
+  onReceiveFromOtherPane,
+  onUploadExternalFiles,
+  onOpenEntry,
+  onRangeSelect,
+  onToggleSelection,
+}: UseSftpPaneDragAndSelectParams): UseSftpPaneDragAndSelectResult => {
+  const [dragOverEntry, setDragOverEntry] = useState<string | null>(null);
+  const [isDragOverPane, setIsDragOverPane] = useState(false);
+  const paneContainerRef = useRef<HTMLDivElement>(null);
+  const lastSelectedIndexRef = useRef<number | null>(null);
+
+  const selectedFilesRef = useRef(pane.selectedFiles);
+  const sortedFilesRef = useRef(sortedDisplayFiles);
+
+  useEffect(() => {
+    selectedFilesRef.current = pane.selectedFiles;
+  }, [pane.selectedFiles]);
+
+  useEffect(() => {
+    sortedFilesRef.current = sortedDisplayFiles;
+  }, [sortedDisplayFiles]);
+
+  const handlePaneDragOver = (e: React.DragEvent) => {
+    const hasFiles = e.dataTransfer.types.includes("Files");
+
+    if (hasFiles) {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "copy";
+      setIsDragOverPane(true);
+      return;
+    }
+
+    if (!draggedFiles || draggedFiles[0]?.side === side) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+    setIsDragOverPane(true);
+  };
+
+  const handlePaneDragLeave = (e: React.DragEvent) => {
+    const relatedTarget = e.relatedTarget as Node | null;
+    if (relatedTarget && paneContainerRef.current?.contains(relatedTarget)) return;
+    setIsDragOverPane(false);
+    setDragOverEntry(null);
+  };
+
+  const handlePaneDrop = async (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOverPane(false);
+    setDragOverEntry(null);
+
+    if (draggedFiles && draggedFiles.length > 0) {
+      if (draggedFiles[0]?.side !== side) {
+        onReceiveFromOtherPane(
+          draggedFiles.map((f) => ({ name: f.name, isDirectory: f.isDirectory })),
+        );
+      }
+      return;
+    }
+
+    if (e.dataTransfer.items.length > 0 && onUploadExternalFiles) {
+      await onUploadExternalFiles(e.dataTransfer);
+    }
+  };
+
+  const handleFileDragStart = useCallback(
+    (entry: SftpFileEntry, e: React.DragEvent) => {
+      if (entry.name === "..") {
+        e.preventDefault();
+        return;
+      }
+      const selectedNames = Array.from(selectedFilesRef.current);
+      const files = selectedNames.includes(entry.name)
+        ? sortedFilesRef.current
+          .filter((f) => selectedNames.includes(f.name))
+          .map((f) => ({
+            name: f.name,
+            isDirectory: isNavigableDirectory(f),
+            side,
+          }))
+        : [
+          {
+            name: entry.name,
+            isDirectory: isNavigableDirectory(entry),
+            side,
+          },
+        ];
+      e.dataTransfer.effectAllowed = "copy";
+      e.dataTransfer.setData("text/plain", files.map((f) => f.name).join("\n"));
+      onDragStart(files, side);
+    },
+    [onDragStart, side],
+  );
+
+  const handleEntryDragOver = useCallback(
+    (entry: SftpFileEntry, e: React.DragEvent) => {
+      if (!draggedFiles || draggedFiles[0]?.side === side) return;
+      if (isNavigableDirectory(entry) && entry.name !== "..") {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragOverEntry(entry.name);
+      }
+    },
+    [draggedFiles, side],
+  );
+
+  const handleEntryDrop = useCallback(
+    (entry: SftpFileEntry, e: React.DragEvent) => {
+      if (!draggedFiles || draggedFiles[0]?.side === side) return;
+      if (isNavigableDirectory(entry) && entry.name !== "..") {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragOverEntry(null);
+        setIsDragOverPane(false);
+        onReceiveFromOtherPane(
+          draggedFiles.map((f) => ({ name: f.name, isDirectory: f.isDirectory })),
+        );
+      }
+    },
+    [draggedFiles, onReceiveFromOtherPane, side],
+  );
+
+  const handleRowSelect = useCallback(
+    (entry: SftpFileEntry, index: number, e: React.MouseEvent) => {
+      if (entry.name === "..") return;
+      if (e.shiftKey && lastSelectedIndexRef.current !== null) {
+        const start = Math.min(lastSelectedIndexRef.current, index);
+        const end = Math.max(lastSelectedIndexRef.current, index);
+        const selectedFileNames = sortedDisplayFiles
+          .slice(start, end + 1)
+          .filter((f) => f.name !== "..")
+          .map((f) => f.name);
+        onRangeSelect(selectedFileNames);
+      } else {
+        onToggleSelection(entry.name, e.ctrlKey || e.metaKey);
+        lastSelectedIndexRef.current = index;
+      }
+    },
+    [onRangeSelect, onToggleSelection, sortedDisplayFiles],
+  );
+
+  const handleRowOpen = useCallback(
+    (entry: SftpFileEntry) => {
+      onOpenEntry(entry);
+    },
+    [onOpenEntry],
+  );
+
+  const handleRowDragLeave = useCallback(() => {
+    setDragOverEntry(null);
+  }, []);
+
+  return {
+    dragOverEntry,
+    isDragOverPane,
+    paneContainerRef,
+    handlePaneDragOver,
+    handlePaneDragLeave,
+    handlePaneDrop,
+    handleFileDragStart,
+    handleEntryDragOver,
+    handleEntryDrop,
+    handleRowDragLeave,
+    handleRowSelect,
+    handleRowOpen,
+  };
+};

components/sftp/hooks/useSftpPaneFiles.ts

@@ -0,0 +1,99 @@
+import { useMemo } from "react";
+import type { SftpFileEntry } from "../../../types";
+import type { SftpPane } from "../../../application/state/sftp/types";
+import type { SortField, SortOrder } from "../utils";
+import { filterHiddenFiles } from "../index";
+
+interface UseSftpPaneFilesParams {
+  files: SftpFileEntry[];
+  filter: string;
+  connection: SftpPane["connection"] | null;
+  showHiddenFiles: boolean;
+  sortField: SortField;
+  sortOrder: SortOrder;
+}
+
+interface UseSftpPaneFilesResult {
+  filteredFiles: SftpFileEntry[];
+  displayFiles: SftpFileEntry[];
+  sortedDisplayFiles: SftpFileEntry[];
+}
+
+export const useSftpPaneFiles = ({
+  files,
+  filter,
+  connection,
+  showHiddenFiles,
+  sortField,
+  sortOrder,
+}: UseSftpPaneFilesParams): UseSftpPaneFilesResult => {
+  const filteredFiles = useMemo(() => {
+    const term = filter.trim().toLowerCase();
+    let nextFiles = filterHiddenFiles(files, showHiddenFiles);
+    if (!term) return nextFiles;
+    return nextFiles.filter(
+      (f) => f.name === ".." || f.name.toLowerCase().includes(term),
+    );
+  }, [files, filter, showHiddenFiles]);
+
+  const displayFiles = useMemo(() => {
+    if (!connection) return [];
+    const isRootPath =
+      connection.currentPath === "/" ||
+      /^[A-Za-z]:[\\/]?$/.test(connection.currentPath);
+    if (isRootPath) return filteredFiles;
+    const parentEntry: SftpFileEntry = {
+      name: "..",
+      type: "directory",
+      size: 0,
+      sizeFormatted: "--",
+      lastModified: 0,
+      lastModifiedFormatted: "--",
+    };
+    return [parentEntry, ...filteredFiles.filter((f) => f.name !== "..")] ;
+  }, [connection, filteredFiles]);
+
+  const sortedDisplayFiles = useMemo(() => {
+    if (!displayFiles.length) return displayFiles;
+
+    const parentEntry = displayFiles.find((f) => f.name === "..");
+    const otherFiles = displayFiles.filter((f) => f.name !== "..");
+
+    const sorted = [...otherFiles].sort((a, b) => {
+      if (sortField !== "type") {
+        if (a.type === "directory" && b.type !== "directory") return -1;
+        if (a.type !== "directory" && b.type === "directory") return 1;
+      }
+
+      let cmp = 0;
+      switch (sortField) {
+        case "name":
+          cmp = a.name.localeCompare(b.name);
+          break;
+        case "size":
+          cmp = (a.size || 0) - (b.size || 0);
+          break;
+        case "modified":
+          cmp = (a.lastModified || 0) - (b.lastModified || 0);
+          break;
+        case "type": {
+          const extA =
+            a.type === "directory"
+              ? "folder"
+              : a.name.split(".").pop()?.toLowerCase() || "";
+          const extB =
+            b.type === "directory"
+              ? "folder"
+              : b.name.split(".").pop()?.toLowerCase() || "";
+          cmp = extA.localeCompare(extB);
+          break;
+        }
+      }
+      return sortOrder === "asc" ? cmp : -cmp;
+    });
+
+    return parentEntry ? [parentEntry, ...sorted] : sorted;
+  }, [displayFiles, sortField, sortOrder]);
+
+  return { filteredFiles, displayFiles, sortedDisplayFiles };
+};

components/sftp/hooks/useSftpPanePath.ts

@@ -0,0 +1,160 @@
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import type { SftpFileEntry } from "../../../types";
+import type { SftpPane } from "../../../application/state/sftp/types";
+import { isNavigableDirectory } from "../index";
+
+interface UseSftpPanePathParams {
+  connection: SftpPane["connection"] | null;
+  filteredFiles: SftpFileEntry[];
+  onNavigateTo: (path: string) => void;
+}
+
+interface UseSftpPanePathResult {
+  isEditingPath: boolean;
+  editingPathValue: string;
+  showPathSuggestions: boolean;
+  pathSuggestionIndex: number;
+  pathInputRef: React.RefObject<HTMLInputElement>;
+  pathDropdownRef: React.RefObject<HTMLDivElement>;
+  pathSuggestions: { path: string; type: "folder" | "history" }[];
+  setEditingPathValue: (value: string) => void;
+  setShowPathSuggestions: (value: boolean) => void;
+  setPathSuggestionIndex: (value: number) => void;
+  handlePathBlur: () => void;
+  handlePathKeyDown: (e: React.KeyboardEvent) => void;
+  handlePathDoubleClick: () => void;
+  handlePathSubmit: (pathOverride?: string) => void;
+}
+
+export const useSftpPanePath = ({
+  connection,
+  filteredFiles,
+  onNavigateTo,
+}: UseSftpPanePathParams): UseSftpPanePathResult => {
+  const [isEditingPath, setIsEditingPath] = useState(false);
+  const [editingPathValue, setEditingPathValue] = useState("");
+  const [showPathSuggestions, setShowPathSuggestions] = useState(false);
+  const [pathSuggestionIndex, setPathSuggestionIndex] = useState(-1);
+  const pathInputRef = useRef<HTMLInputElement>(null);
+  const pathDropdownRef = useRef<HTMLDivElement>(null);
+
+  const pathSuggestions = useMemo(() => {
+    if (!isEditingPath || !connection) return [];
+    const currentValue = editingPathValue.trim().toLowerCase();
+    const suggestions: { path: string; type: "folder" | "history" }[] = [];
+
+    const folders = filteredFiles.filter(
+      (f) => isNavigableDirectory(f) && f.name !== "..",
+    );
+    folders.forEach((f) => {
+      const fullPath =
+        connection.currentPath === "/"
+          ? `/${f.name}`
+          : `${connection.currentPath}/${f.name}`;
+      if (
+        !currentValue ||
+        fullPath.toLowerCase().includes(currentValue) ||
+        f.name.toLowerCase().includes(currentValue)
+      ) {
+        suggestions.push({ path: fullPath, type: "folder" });
+      }
+    });
+
+    const quickPaths = ["/home", "/var", "/etc", "/tmp", "/usr", "/opt", "/root"];
+    quickPaths.forEach((qp) => {
+      if (!currentValue || qp.toLowerCase().includes(currentValue)) {
+        if (!suggestions.some((s) => s.path === qp)) {
+          suggestions.push({ path: qp, type: "history" });
+        }
+      }
+    });
+
+    return suggestions.slice(0, 8);
+  }, [connection, editingPathValue, filteredFiles, isEditingPath]);
+
+  const handlePathDoubleClick = () => {
+    if (!connection) return;
+    setEditingPathValue(connection.currentPath);
+    setIsEditingPath(true);
+    setShowPathSuggestions(true);
+    setPathSuggestionIndex(-1);
+    setTimeout(() => pathInputRef.current?.select(), 0);
+  };
+
+  const handlePathSubmit = useCallback((pathOverride?: string) => {
+    const newPath = (pathOverride ?? editingPathValue).trim() || "/";
+    setIsEditingPath(false);
+    setShowPathSuggestions(false);
+    setPathSuggestionIndex(-1);
+    if (connection && newPath !== connection.currentPath) {
+      const isWindowsPath = /^[A-Za-z]:/.test(newPath);
+      if (isWindowsPath) {
+        let normalizedPath = newPath;
+        if (/^[A-Za-z]:[\\/]?$/.test(newPath)) {
+          normalizedPath = newPath.charAt(0).toUpperCase() + ":\\";
+        }
+        onNavigateTo(normalizedPath);
+      } else {
+        onNavigateTo(newPath.startsWith("/") ? newPath : `/${newPath}`);
+      }
+    }
+  }, [connection, editingPathValue, onNavigateTo]);
+
+  const handlePathKeyDown = (e: React.KeyboardEvent) => {
+    if (showPathSuggestions && pathSuggestions.length > 0) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setPathSuggestionIndex((prev) =>
+          prev < pathSuggestions.length - 1 ? prev + 1 : 0,
+        );
+        return;
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setPathSuggestionIndex((prev) =>
+          prev > 0 ? prev - 1 : pathSuggestions.length - 1,
+        );
+        return;
+      } else if (e.key === "Tab" && pathSuggestionIndex >= 0) {
+        e.preventDefault();
+        setEditingPathValue(pathSuggestions[pathSuggestionIndex].path);
+        return;
+      }
+    }
+    if (e.key === "Enter") {
+      if (pathSuggestionIndex >= 0 && pathSuggestions[pathSuggestionIndex]) {
+        handlePathSubmit(pathSuggestions[pathSuggestionIndex].path);
+      } else {
+        handlePathSubmit();
+      }
+    } else if (e.key === "Escape") {
+      setIsEditingPath(false);
+      setShowPathSuggestions(false);
+      setPathSuggestionIndex(-1);
+    }
+  };
+
+  const handlePathBlur = useCallback(() => {
+    setTimeout(() => {
+      if (!pathDropdownRef.current?.contains(document.activeElement)) {
+        handlePathSubmit();
+      }
+    }, 150);
+  }, [handlePathSubmit]);
+
+  return {
+    isEditingPath,
+    editingPathValue,
+    showPathSuggestions,
+    pathSuggestionIndex,
+    pathInputRef,
+    pathDropdownRef,
+    pathSuggestions,
+    setEditingPathValue,
+    setShowPathSuggestions,
+    setPathSuggestionIndex,
+    handlePathBlur,
+    handlePathKeyDown,
+    handlePathDoubleClick,
+    handlePathSubmit,
+  };
+};

components/sftp/hooks/useSftpPaneSorting.ts

@@ -0,0 +1,78 @@
+import React, { useCallback, useRef, useState } from "react";
+import type { ColumnWidths, SortField, SortOrder } from "../utils";
+
+interface UseSftpPaneSortingResult {
+  sortField: SortField;
+  sortOrder: SortOrder;
+  columnWidths: ColumnWidths;
+  handleSort: (field: SortField) => void;
+  handleResizeStart: (field: keyof ColumnWidths, e: React.MouseEvent) => void;
+}
+
+export const useSftpPaneSorting = (): UseSftpPaneSortingResult => {
+  const [sortField, setSortField] = useState<SortField>("name");
+  const [sortOrder, setSortOrder] = useState<SortOrder>("asc");
+  const [columnWidths, setColumnWidths] = useState<ColumnWidths>({
+    name: 45,
+    modified: 25,
+    size: 15,
+    type: 15,
+  });
+
+  const resizingRef = useRef<{
+    field: keyof ColumnWidths;
+    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: keyof ColumnWidths,
+    e: React.MouseEvent,
+  ) => {
+    e.preventDefault();
+    e.stopPropagation();
+    resizingRef.current = {
+      field,
+      startX: e.clientX,
+      startWidth: columnWidths[field],
+    };
+    document.addEventListener("mousemove", handleResizeMove);
+    document.addEventListener("mouseup", handleResizeEnd);
+  };
+
+  return {
+    sortField,
+    sortOrder,
+    columnWidths,
+    handleSort,
+    handleResizeStart,
+  };
+};

components/sftp/hooks/useSftpPaneVirtualList.ts

@@ -0,0 +1,126 @@
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import type { SftpFileEntry } from "../../../types";
+
+interface UseSftpPaneVirtualListParams {
+  isActive: boolean;
+  sortedDisplayFiles: SftpFileEntry[];
+}
+
+interface UseSftpPaneVirtualListResult {
+  fileListRef: React.RefObject<HTMLDivElement>;
+  rowHeight: number;
+  handleFileListScroll: (e: React.UIEvent<HTMLDivElement>) => void;
+  shouldVirtualize: boolean;
+  totalHeight: number;
+  visibleRows: { entry: SftpFileEntry; index: number; top: number }[];
+}
+
+export const useSftpPaneVirtualList = ({
+  isActive,
+  sortedDisplayFiles,
+}: UseSftpPaneVirtualListParams): UseSftpPaneVirtualListResult => {
+  const fileListRef = useRef<HTMLDivElement>(null);
+  const [rowHeight, setRowHeight] = useState(0);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [viewportHeight, setViewportHeight] = useState(0);
+  const scrollFrameRef = useRef<number | null>(null);
+
+  useLayoutEffect(() => {
+    const container = fileListRef.current;
+    if (!container || !isActive) return;
+    const update = () => setViewportHeight(container.clientHeight);
+    update();
+    const raf1 = window.requestAnimationFrame(update);
+    const raf2 = window.requestAnimationFrame(update);
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(container);
+    return () => {
+      resizeObserver.disconnect();
+      window.cancelAnimationFrame(raf1);
+      window.cancelAnimationFrame(raf2);
+    };
+  }, [isActive, sortedDisplayFiles.length]);
+
+  useLayoutEffect(() => {
+    const container = fileListRef.current;
+    if (!container || !isActive || sortedDisplayFiles.length === 0) return;
+    const raf = window.requestAnimationFrame(() => {
+      const rowElement = container.querySelector(
+        '[data-sftp-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);
+  }, [isActive, rowHeight, sortedDisplayFiles.length]);
+
+  useEffect(() => {
+    return () => {
+      if (scrollFrameRef.current !== null) {
+        window.cancelAnimationFrame(scrollFrameRef.current);
+      }
+    };
+  }, []);
+
+  const handleFileListScroll = useCallback(
+    (e: React.UIEvent<HTMLDivElement>) => {
+      if (!isActive) return;
+      const nextTop = e.currentTarget.scrollTop;
+      if (scrollFrameRef.current !== null) return;
+      scrollFrameRef.current = window.requestAnimationFrame(() => {
+        scrollFrameRef.current = null;
+        setScrollTop(nextTop);
+      });
+    },
+    [isActive],
+  );
+
+  const { shouldVirtualize, totalHeight, visibleRows } = useMemo(() => {
+    const overscan = 6;
+    const canVirtualize = isActive && viewportHeight > 0 && rowHeight > 0;
+    const shouldVirtualizeLocal = canVirtualize && sortedDisplayFiles.length > 50;
+    const totalHeightLocal = shouldVirtualizeLocal
+      ? sortedDisplayFiles.length * rowHeight
+      : 0;
+    const startIndex = shouldVirtualizeLocal
+      ? Math.max(0, Math.floor(scrollTop / rowHeight) - overscan)
+      : 0;
+    const endIndex = shouldVirtualizeLocal
+      ? Math.min(
+        sortedDisplayFiles.length - 1,
+        Math.ceil((scrollTop + viewportHeight) / rowHeight) + overscan,
+      )
+      : sortedDisplayFiles.length - 1;
+    const visibleRowsLocal = shouldVirtualizeLocal
+      ? sortedDisplayFiles
+        .slice(startIndex, endIndex + 1)
+        .map((entry, idx) => ({
+          entry,
+          index: startIndex + idx,
+          top: (startIndex + idx) * rowHeight,
+        }))
+      : sortedDisplayFiles.map((entry, index) => ({
+        entry,
+        index,
+        top: 0,
+      }));
+
+    return {
+      shouldVirtualize: shouldVirtualizeLocal,
+      totalHeight: totalHeightLocal,
+      visibleRows: visibleRowsLocal,
+    };
+  }, [isActive, rowHeight, scrollTop, sortedDisplayFiles, viewportHeight]);
+
+  return {
+    fileListRef,
+    rowHeight,
+    handleFileListScroll,
+    shouldVirtualize,
+    totalHeight,
+    visibleRows,
+  };
+};

components/sftp/hooks/useSftpViewFileOps.ts

@@ -0,0 +1,441 @@
+import React, { useCallback, useState } from "react";
+import type { MutableRefObject } from "react";
+import type { SftpFileEntry } from "../../../types";
+import type { SftpStateApi } from "../../../application/state/useSftpState";
+import { logger } from "../../../lib/logger";
+import { toast } from "../../ui/toast";
+import { getFileExtension, FileOpenerType, SystemAppInfo } from "../../../lib/sftpFileUtils";
+import { isNavigableDirectory } from "../index";
+
+interface UseSftpViewFileOpsParams {
+  sftpRef: MutableRefObject<SftpStateApi>;
+  behaviorRef: MutableRefObject<string>;
+  autoSyncRef: MutableRefObject<boolean>;
+  getOpenerForFileRef: MutableRefObject<
+    (fileName: string) => { openerType?: FileOpenerType; systemApp?: SystemAppInfo } | null
+  >;
+  setOpenerForExtension: (
+    extension: string,
+    openerType: FileOpenerType,
+    systemApp?: SystemAppInfo,
+  ) => void;
+  t: (key: string, vars?: Record<string, string | number>) => string;
+}
+
+interface UseSftpViewFileOpsResult {
+  permissionsState: { file: SftpFileEntry; side: "left" | "right" } | null;
+  setPermissionsState: React.Dispatch<
+    React.SetStateAction<{ file: SftpFileEntry; side: "left" | "right" } | null>
+  >;
+  showTextEditor: boolean;
+  setShowTextEditor: React.Dispatch<React.SetStateAction<boolean>>;
+  textEditorTarget: {
+    file: SftpFileEntry;
+    side: "left" | "right";
+    fullPath: string;
+  } | null;
+  setTextEditorTarget: React.Dispatch<
+    React.SetStateAction<{
+      file: SftpFileEntry;
+      side: "left" | "right";
+      fullPath: string;
+    } | null>
+  >;
+  textEditorContent: string;
+  setTextEditorContent: React.Dispatch<React.SetStateAction<string>>;
+  loadingTextContent: boolean;
+  showFileOpenerDialog: boolean;
+  setShowFileOpenerDialog: React.Dispatch<React.SetStateAction<boolean>>;
+  fileOpenerTarget: {
+    file: SftpFileEntry;
+    side: "left" | "right";
+    fullPath: string;
+  } | null;
+  setFileOpenerTarget: React.Dispatch<
+    React.SetStateAction<{
+      file: SftpFileEntry;
+      side: "left" | "right";
+      fullPath: string;
+    } | null>
+  >;
+  handleSaveTextFile: (content: string) => Promise<void>;
+  handleFileOpenerSelect: (
+    openerType: FileOpenerType,
+    setAsDefault: boolean,
+    systemApp?: SystemAppInfo,
+  ) => Promise<void>;
+  handleSelectSystemApp: () => Promise<SystemAppInfo | null>;
+  onEditPermissionsLeft: (file: SftpFileEntry) => void;
+  onEditPermissionsRight: (file: SftpFileEntry) => void;
+  onOpenEntryLeft: (entry: SftpFileEntry) => void;
+  onOpenEntryRight: (entry: SftpFileEntry) => void;
+  onEditFileLeft: (file: SftpFileEntry) => void;
+  onEditFileRight: (file: SftpFileEntry) => void;
+  onOpenFileLeft: (file: SftpFileEntry) => void;
+  onOpenFileRight: (file: SftpFileEntry) => void;
+  onOpenFileWithLeft: (file: SftpFileEntry) => void;
+  onOpenFileWithRight: (file: SftpFileEntry) => void;
+  onDownloadFileLeft: (file: SftpFileEntry) => void;
+  onDownloadFileRight: (file: SftpFileEntry) => void;
+  onUploadExternalFilesLeft: (dataTransfer: DataTransfer) => void;
+  onUploadExternalFilesRight: (dataTransfer: DataTransfer) => void;
+}
+
+export const useSftpViewFileOps = ({
+  sftpRef,
+  behaviorRef,
+  autoSyncRef,
+  getOpenerForFileRef,
+  setOpenerForExtension,
+  t,
+}: UseSftpViewFileOpsParams): UseSftpViewFileOpsResult => {
+  const [permissionsState, setPermissionsState] = useState<{
+    file: SftpFileEntry;
+    side: "left" | "right";
+  } | null>(null);
+
+  const [showTextEditor, setShowTextEditor] = useState(false);
+  const [textEditorTarget, setTextEditorTarget] = useState<{
+    file: SftpFileEntry;
+    side: "left" | "right";
+    fullPath: string;
+  } | null>(null);
+  const [textEditorContent, setTextEditorContent] = useState("");
+  const [loadingTextContent, setLoadingTextContent] = useState(false);
+
+  const [showFileOpenerDialog, setShowFileOpenerDialog] = useState(false);
+  const [fileOpenerTarget, setFileOpenerTarget] = useState<{
+    file: SftpFileEntry;
+    side: "left" | "right";
+    fullPath: string;
+  } | null>(null);
+
+  const onEditPermissionsLeft = useCallback(
+    (file: SftpFileEntry) => setPermissionsState({ file, side: "left" }),
+    [],
+  );
+  const onEditPermissionsRight = useCallback(
+    (file: SftpFileEntry) => setPermissionsState({ file, side: "right" }),
+    [],
+  );
+
+  const handleEditFileForSide = useCallback(
+    async (side: "left" | "right", file: SftpFileEntry) => {
+      const pane = side === "left" ? sftpRef.current.leftPane : sftpRef.current.rightPane;
+      if (!pane.connection) return;
+
+      const fullPath = sftpRef.current.joinPath(pane.connection.currentPath, file.name);
+
+      try {
+        setLoadingTextContent(true);
+        setTextEditorTarget({ file, side, fullPath });
+
+        const content = await sftpRef.current.readTextFile(side, fullPath);
+
+        setTextEditorContent(content);
+        setShowTextEditor(true);
+      } catch (e) {
+        toast.error(e instanceof Error ? e.message : "Failed to load file", "SFTP");
+        setTextEditorTarget(null);
+      } finally {
+        setLoadingTextContent(false);
+      }
+    },
+    [sftpRef],
+  );
+
+  const handleOpenFileForSide = useCallback(
+    async (side: "left" | "right", file: SftpFileEntry) => {
+      const pane = side === "left" ? sftpRef.current.leftPane : sftpRef.current.rightPane;
+      if (!pane.connection) return;
+
+      const fullPath = sftpRef.current.joinPath(pane.connection.currentPath, file.name);
+      const savedOpener = getOpenerForFileRef.current(file.name);
+
+      if (savedOpener && savedOpener.openerType) {
+        if (savedOpener.openerType === "builtin-editor") {
+          handleEditFileForSide(side, file);
+          return;
+        } else if (savedOpener.openerType === "system-app" && savedOpener.systemApp) {
+          try {
+            await sftpRef.current.downloadToTempAndOpen(
+              side,
+              fullPath,
+              file.name,
+              savedOpener.systemApp.path,
+              { enableWatch: autoSyncRef.current },
+            );
+          } catch (e) {
+            toast.error(e instanceof Error ? e.message : "Failed to open file", "SFTP");
+          }
+          return;
+        }
+      }
+
+      setFileOpenerTarget({ file, side, fullPath });
+      setShowFileOpenerDialog(true);
+    },
+    [sftpRef, handleEditFileForSide, getOpenerForFileRef, autoSyncRef],
+  );
+
+  const handleFileOpenerSelect = useCallback(
+    async (openerType: FileOpenerType, setAsDefault: boolean, systemApp?: SystemAppInfo) => {
+      if (!fileOpenerTarget) return;
+
+      if (setAsDefault) {
+        const ext = getFileExtension(fileOpenerTarget.file.name);
+        setOpenerForExtension(ext, openerType, systemApp);
+      }
+
+      setShowFileOpenerDialog(false);
+
+      if (openerType === "builtin-editor") {
+        handleEditFileForSide(fileOpenerTarget.side, fileOpenerTarget.file);
+      } else if (openerType === "system-app" && systemApp) {
+        try {
+          await sftpRef.current.downloadToTempAndOpen(
+            fileOpenerTarget.side,
+            fileOpenerTarget.fullPath,
+            fileOpenerTarget.file.name,
+            systemApp.path,
+            { enableWatch: autoSyncRef.current },
+          );
+        } catch (e) {
+          toast.error(e instanceof Error ? e.message : "Failed to open file", "SFTP");
+        }
+      }
+
+      setFileOpenerTarget(null);
+    },
+    [fileOpenerTarget, setOpenerForExtension, handleEditFileForSide, autoSyncRef, sftpRef],
+  );
+
+  const handleSelectSystemApp = useCallback(async (): Promise<SystemAppInfo | null> => {
+    const result = await sftpRef.current.selectApplication();
+    if (result) {
+      return { path: result.path, name: result.name };
+    }
+    return null;
+  }, [sftpRef]);
+
+  const handleSaveTextFile = useCallback(
+    async (content: string) => {
+      if (!textEditorTarget) return;
+
+      await sftpRef.current.writeTextFile(
+        textEditorTarget.side,
+        textEditorTarget.fullPath,
+        content,
+      );
+    },
+    [textEditorTarget, sftpRef],
+  );
+
+  const onEditFileLeft = useCallback(
+    (file: SftpFileEntry) => handleEditFileForSide("left", file),
+    [handleEditFileForSide],
+  );
+  const onEditFileRight = useCallback(
+    (file: SftpFileEntry) => handleEditFileForSide("right", file),
+    [handleEditFileForSide],
+  );
+  const onOpenFileLeft = useCallback(
+    (file: SftpFileEntry) => handleOpenFileForSide("left", file),
+    [handleOpenFileForSide],
+  );
+  const onOpenFileRight = useCallback(
+    (file: SftpFileEntry) => handleOpenFileForSide("right", file),
+    [handleOpenFileForSide],
+  );
+
+  const handleOpenFileWithForSide = useCallback(
+    (side: "left" | "right", file: SftpFileEntry) => {
+      const pane = side === "left" ? sftpRef.current.leftPane : sftpRef.current.rightPane;
+      if (!pane.connection) return;
+
+      const fullPath = sftpRef.current.joinPath(pane.connection.currentPath, file.name);
+      setFileOpenerTarget({ file, side, fullPath });
+      setShowFileOpenerDialog(true);
+    },
+    [sftpRef],
+  );
+
+  const onOpenFileWithLeft = useCallback(
+    (file: SftpFileEntry) => handleOpenFileWithForSide("left", file),
+    [handleOpenFileWithForSide],
+  );
+  const onOpenFileWithRight = useCallback(
+    (file: SftpFileEntry) => handleOpenFileWithForSide("right", file),
+    [handleOpenFileWithForSide],
+  );
+
+  const handleUploadExternalFilesForSide = useCallback(
+    async (side: "left" | "right", dataTransfer: DataTransfer) => {
+      try {
+        const results = await sftpRef.current.uploadExternalFiles(side, dataTransfer);
+
+        // Check if upload was cancelled
+        if (results.some((r) => r.cancelled)) {
+          toast.info(t("sftp.upload.cancelled"), "SFTP");
+          return;
+        }
+
+        const failCount = results.filter((r) => !r.success && !r.cancelled).length;
+        const successCount = results.filter((r) => r.success).length;
+
+        if (failCount === 0) {
+          const message =
+            successCount === 1
+              ? `${t("sftp.upload")}: ${results[0].fileName}`
+              : `${t("sftp.uploadFiles")}: ${successCount}`;
+          toast.success(message, "SFTP");
+        } else {
+          const failedFiles = results.filter((r) => !r.success && !r.cancelled);
+          failedFiles.forEach((failed) => {
+            const errorMsg = failed.error ? ` - ${failed.error}` : "";
+            toast.error(
+              `${t("sftp.error.uploadFailed")}: ${failed.fileName}${errorMsg}`,
+              "SFTP",
+            );
+          });
+        }
+      } catch (error) {
+        logger.error("[SftpView] Failed to upload external files:", error);
+        toast.error(
+          error instanceof Error ? error.message : t("sftp.error.uploadFailed"),
+          "SFTP",
+        );
+      }
+    },
+    [sftpRef, t],
+  );
+
+  const onUploadExternalFilesLeft = useCallback(
+    (dataTransfer: DataTransfer) => handleUploadExternalFilesForSide("left", dataTransfer),
+    [handleUploadExternalFilesForSide],
+  );
+
+  const onUploadExternalFilesRight = useCallback(
+    (dataTransfer: DataTransfer) => handleUploadExternalFilesForSide("right", dataTransfer),
+    [handleUploadExternalFilesForSide],
+  );
+
+  const handleDownloadFileForSide = useCallback(
+    async (side: "left" | "right", file: SftpFileEntry) => {
+      const pane = side === "left" ? sftpRef.current.leftPane : sftpRef.current.rightPane;
+      if (!pane.connection) return;
+
+      const fullPath = sftpRef.current.joinPath(pane.connection.currentPath, file.name);
+
+      try {
+        const content = await sftpRef.current.readBinaryFile(side, 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);
+
+        toast.success(`${t("sftp.context.download")}: ${file.name}`, "SFTP");
+      } catch (e) {
+        logger.error("[SftpView] Failed to download file:", e);
+        toast.error(
+          e instanceof Error ? e.message : t("sftp.error.downloadFailed"),
+          "SFTP",
+        );
+      }
+    },
+    [sftpRef, t],
+  );
+
+  const onDownloadFileLeft = useCallback(
+    (file: SftpFileEntry) => handleDownloadFileForSide("left", file),
+    [handleDownloadFileForSide],
+  );
+
+  const onDownloadFileRight = useCallback(
+    (file: SftpFileEntry) => handleDownloadFileForSide("right", file),
+    [handleDownloadFileForSide],
+  );
+
+  const onOpenEntryLeft = useCallback(
+    (entry: SftpFileEntry) => {
+      const isDir = isNavigableDirectory(entry);
+
+      if (entry.name === ".." || isDir) {
+        sftpRef.current.openEntry("left", entry);
+        return;
+      }
+
+      if (behaviorRef.current === "transfer") {
+        const fileData = [{
+          name: entry.name,
+          isDirectory: isDir,
+        }];
+        sftpRef.current.startTransfer(fileData, "left", "right");
+      } else {
+        onOpenFileLeft(entry);
+      }
+    },
+    [sftpRef, onOpenFileLeft, behaviorRef],
+  );
+
+  const onOpenEntryRight = useCallback(
+    (entry: SftpFileEntry) => {
+      const isDir = isNavigableDirectory(entry);
+
+      if (entry.name === ".." || isDir) {
+        sftpRef.current.openEntry("right", entry);
+        return;
+      }
+
+      if (behaviorRef.current === "transfer") {
+        const fileData = [{
+          name: entry.name,
+          isDirectory: isDir,
+        }];
+        sftpRef.current.startTransfer(fileData, "right", "left");
+      } else {
+        onOpenFileRight(entry);
+      }
+    },
+    [sftpRef, onOpenFileRight, behaviorRef],
+  );
+
+  return {
+    permissionsState,
+    setPermissionsState,
+    showTextEditor,
+    setShowTextEditor,
+    textEditorTarget,
+    setTextEditorTarget,
+    textEditorContent,
+    setTextEditorContent,
+    loadingTextContent,
+    showFileOpenerDialog,
+    setShowFileOpenerDialog,
+    fileOpenerTarget,
+    setFileOpenerTarget,
+    handleSaveTextFile,
+    handleFileOpenerSelect,
+    handleSelectSystemApp,
+    onEditPermissionsLeft,
+    onEditPermissionsRight,
+    onOpenEntryLeft,
+    onOpenEntryRight,
+    onEditFileLeft,
+    onEditFileRight,
+    onOpenFileLeft,
+    onOpenFileRight,
+    onOpenFileWithLeft,
+    onOpenFileWithRight,
+    onDownloadFileLeft,
+    onDownloadFileRight,
+    onUploadExternalFilesLeft,
+    onUploadExternalFilesRight,
+  };
+};

components/sftp/hooks/useSftpViewPaneActions.ts

@@ -0,0 +1,224 @@
+import { useCallback, useMemo, useState } from "react";
+import type { MutableRefObject } from "react";
+import type { SftpStateApi } from "../../../application/state/useSftpState";
+import type { SftpDragCallbacks } from "../SftpContext";
+
+interface UseSftpViewPaneActionsParams {
+  sftpRef: MutableRefObject<SftpStateApi>;
+}
+
+interface UseSftpViewPaneActionsResult {
+  dragCallbacks: SftpDragCallbacks;
+  draggedFiles: { name: string; isDirectory: boolean; side: "left" | "right" }[] | null;
+  onConnectLeft: (host: Parameters<SftpStateApi["connect"]>[1]) => void;
+  onConnectRight: (host: Parameters<SftpStateApi["connect"]>[1]) => void;
+  onDisconnectLeft: () => void;
+  onDisconnectRight: () => void;
+  onNavigateToLeft: (path: string) => void;
+  onNavigateToRight: (path: string) => void;
+  onNavigateUpLeft: () => void;
+  onNavigateUpRight: () => void;
+  onRefreshLeft: () => void;
+  onRefreshRight: () => void;
+  onSetFilenameEncodingLeft: (encoding: Parameters<SftpStateApi["setFilenameEncoding"]>[1]) => void;
+  onSetFilenameEncodingRight: (encoding: Parameters<SftpStateApi["setFilenameEncoding"]>[1]) => void;
+  onToggleSelectionLeft: (name: string, multi: boolean) => void;
+  onToggleSelectionRight: (name: string, multi: boolean) => void;
+  onRangeSelectLeft: (fileNames: string[]) => void;
+  onRangeSelectRight: (fileNames: string[]) => void;
+  onClearSelectionLeft: () => void;
+  onClearSelectionRight: () => void;
+  onSetFilterLeft: (filter: string) => void;
+  onSetFilterRight: (filter: string) => void;
+  onCreateDirectoryLeft: (name: string) => void;
+  onCreateDirectoryRight: (name: string) => void;
+  onCreateFileLeft: (name: string) => void;
+  onCreateFileRight: (name: string) => void;
+  onDeleteFilesLeft: (names: string[]) => void;
+  onDeleteFilesRight: (names: string[]) => void;
+  onRenameFileLeft: (old: string, newName: string) => void;
+  onRenameFileRight: (old: string, newName: string) => void;
+  onCopyToOtherPaneLeft: (files: { name: string; isDirectory: boolean }[]) => void;
+  onCopyToOtherPaneRight: (files: { name: string; isDirectory: boolean }[]) => void;
+  onReceiveFromOtherPaneLeft: (files: { name: string; isDirectory: boolean }[]) => void;
+  onReceiveFromOtherPaneRight: (files: { name: string; isDirectory: boolean }[]) => void;
+}
+
+export const useSftpViewPaneActions = ({
+  sftpRef,
+}: UseSftpViewPaneActionsParams): UseSftpViewPaneActionsResult => {
+  const [draggedFiles, setDraggedFiles] = useState<
+    { name: string; isDirectory: boolean; side: "left" | "right" }[] | null
+  >(null);
+
+  const handleDragStart = useCallback(
+    (
+      files: { name: string; isDirectory: boolean }[],
+      side: "left" | "right",
+    ) => {
+      setDraggedFiles(files.map((f) => ({ ...f, side })));
+    },
+    [],
+  );
+
+  const handleDragEnd = useCallback(() => {
+    setDraggedFiles(null);
+  }, []);
+
+  const onCopyToOtherPaneLeft = useCallback(
+    (files: { name: string; isDirectory: boolean }[]) =>
+      sftpRef.current.startTransfer(files, "left", "right"),
+    [sftpRef],
+  );
+  const onCopyToOtherPaneRight = useCallback(
+    (files: { name: string; isDirectory: boolean }[]) =>
+      sftpRef.current.startTransfer(files, "right", "left"),
+    [sftpRef],
+  );
+  const onReceiveFromOtherPaneLeft = useCallback(
+    (files: { name: string; isDirectory: boolean }[]) =>
+      sftpRef.current.startTransfer(files, "right", "left"),
+    [sftpRef],
+  );
+  const onReceiveFromOtherPaneRight = useCallback(
+    (files: { name: string; isDirectory: boolean }[]) =>
+      sftpRef.current.startTransfer(files, "left", "right"),
+    [sftpRef],
+  );
+
+  const onConnectLeft = useCallback(
+    (host: Parameters<SftpStateApi["connect"]>[1]) => sftpRef.current.connect("left", host),
+    [sftpRef],
+  );
+  const onConnectRight = useCallback(
+    (host: Parameters<SftpStateApi["connect"]>[1]) => sftpRef.current.connect("right", host),
+    [sftpRef],
+  );
+  const onDisconnectLeft = useCallback(() => sftpRef.current.disconnect("left"), [sftpRef]);
+  const onDisconnectRight = useCallback(() => sftpRef.current.disconnect("right"), [sftpRef]);
+  const onNavigateToLeft = useCallback(
+    (path: string) => sftpRef.current.navigateTo("left", path),
+    [sftpRef],
+  );
+  const onNavigateToRight = useCallback(
+    (path: string) => sftpRef.current.navigateTo("right", path),
+    [sftpRef],
+  );
+  const onNavigateUpLeft = useCallback(() => sftpRef.current.navigateUp("left"), [sftpRef]);
+  const onNavigateUpRight = useCallback(() => sftpRef.current.navigateUp("right"), [sftpRef]);
+  const onRefreshLeft = useCallback(() => sftpRef.current.refresh("left"), [sftpRef]);
+  const onRefreshRight = useCallback(() => sftpRef.current.refresh("right"), [sftpRef]);
+  const onSetFilenameEncodingLeft = useCallback(
+    (encoding: Parameters<SftpStateApi["setFilenameEncoding"]>[1]) =>
+      sftpRef.current.setFilenameEncoding("left", encoding),
+    [sftpRef],
+  );
+  const onSetFilenameEncodingRight = useCallback(
+    (encoding: Parameters<SftpStateApi["setFilenameEncoding"]>[1]) =>
+      sftpRef.current.setFilenameEncoding("right", encoding),
+    [sftpRef],
+  );
+  const onToggleSelectionLeft = useCallback(
+    (name: string, multi: boolean) => sftpRef.current.toggleSelection("left", name, multi),
+    [sftpRef],
+  );
+  const onToggleSelectionRight = useCallback(
+    (name: string, multi: boolean) => sftpRef.current.toggleSelection("right", name, multi),
+    [sftpRef],
+  );
+  const onRangeSelectLeft = useCallback(
+    (fileNames: string[]) => sftpRef.current.rangeSelect("left", fileNames),
+    [sftpRef],
+  );
+  const onRangeSelectRight = useCallback(
+    (fileNames: string[]) => sftpRef.current.rangeSelect("right", fileNames),
+    [sftpRef],
+  );
+  const onClearSelectionLeft = useCallback(() => sftpRef.current.clearSelection("left"), [sftpRef]);
+  const onClearSelectionRight = useCallback(() => sftpRef.current.clearSelection("right"), [sftpRef]);
+  const onSetFilterLeft = useCallback(
+    (filter: string) => sftpRef.current.setFilter("left", filter),
+    [sftpRef],
+  );
+  const onSetFilterRight = useCallback(
+    (filter: string) => sftpRef.current.setFilter("right", filter),
+    [sftpRef],
+  );
+  const onCreateDirectoryLeft = useCallback(
+    (name: string) => sftpRef.current.createDirectory("left", name),
+    [sftpRef],
+  );
+  const onCreateDirectoryRight = useCallback(
+    (name: string) => sftpRef.current.createDirectory("right", name),
+    [sftpRef],
+  );
+  const onCreateFileLeft = useCallback(
+    (name: string) => sftpRef.current.createFile("left", name),
+    [sftpRef],
+  );
+  const onCreateFileRight = useCallback(
+    (name: string) => sftpRef.current.createFile("right", name),
+    [sftpRef],
+  );
+  const onDeleteFilesLeft = useCallback(
+    (names: string[]) => sftpRef.current.deleteFiles("left", names),
+    [sftpRef],
+  );
+  const onDeleteFilesRight = useCallback(
+    (names: string[]) => sftpRef.current.deleteFiles("right", names),
+    [sftpRef],
+  );
+  const onRenameFileLeft = useCallback(
+    (old: string, newName: string) => sftpRef.current.renameFile("left", old, newName),
+    [sftpRef],
+  );
+  const onRenameFileRight = useCallback(
+    (old: string, newName: string) => sftpRef.current.renameFile("right", old, newName),
+    [sftpRef],
+  );
+
+  const dragCallbacks = useMemo<SftpDragCallbacks>(
+    () => ({
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+    }),
+    [handleDragStart, handleDragEnd],
+  );
+
+  return {
+    dragCallbacks,
+    draggedFiles,
+    onConnectLeft,
+    onConnectRight,
+    onDisconnectLeft,
+    onDisconnectRight,
+    onNavigateToLeft,
+    onNavigateToRight,
+    onNavigateUpLeft,
+    onNavigateUpRight,
+    onRefreshLeft,
+    onRefreshRight,
+    onSetFilenameEncodingLeft,
+    onSetFilenameEncodingRight,
+    onToggleSelectionLeft,
+    onToggleSelectionRight,
+    onRangeSelectLeft,
+    onRangeSelectRight,
+    onClearSelectionLeft,
+    onClearSelectionRight,
+    onSetFilterLeft,
+    onSetFilterRight,
+    onCreateDirectoryLeft,
+    onCreateDirectoryRight,
+    onCreateFileLeft,
+    onCreateFileRight,
+    onDeleteFilesLeft,
+    onDeleteFilesRight,
+    onRenameFileLeft,
+    onRenameFileRight,
+    onCopyToOtherPaneLeft,
+    onCopyToOtherPaneRight,
+    onReceiveFromOtherPaneLeft,
+    onReceiveFromOtherPaneRight,
+  };
+};

components/sftp/hooks/useSftpViewPaneCallbacks.ts

@@ -0,0 +1,124 @@
+import { useMemo } from "react";
+import type { MutableRefObject } from "react";
+import type { SftpStateApi } from "../../../application/state/useSftpState";
+import type { SftpPaneCallbacks } from "../SftpContext";
+import { useSftpViewPaneActions } from "./useSftpViewPaneActions";
+import { useSftpViewFileOps } from "./useSftpViewFileOps";
+import type { FileOpenerType, SystemAppInfo } from "../../../lib/sftpFileUtils";
+
+interface UseSftpViewPaneCallbacksParams {
+  sftpRef: MutableRefObject<SftpStateApi>;
+  behaviorRef: MutableRefObject<string>;
+  autoSyncRef: MutableRefObject<boolean>;
+  getOpenerForFileRef: MutableRefObject<
+    (fileName: string) => { openerType?: FileOpenerType; systemApp?: SystemAppInfo } | null
+  >;
+  setOpenerForExtension: (
+    extension: string,
+    openerType: FileOpenerType,
+    systemApp?: SystemAppInfo,
+  ) => void;
+  t: (key: string, vars?: Record<string, string | number>) => string;
+}
+
+export const useSftpViewPaneCallbacks = ({
+  sftpRef,
+  behaviorRef,
+  autoSyncRef,
+  getOpenerForFileRef,
+  setOpenerForExtension,
+  t,
+}: UseSftpViewPaneCallbacksParams) => {
+  const paneActions = useSftpViewPaneActions({ sftpRef });
+  const fileOps = useSftpViewFileOps({
+    sftpRef,
+    behaviorRef,
+    autoSyncRef,
+    getOpenerForFileRef,
+    setOpenerForExtension,
+    t,
+  });
+
+  /* eslint-disable react-hooks/exhaustive-deps -- Handlers use refs, so they are stable */
+  const leftCallbacks = useMemo<SftpPaneCallbacks>(
+    () => ({
+      onConnect: paneActions.onConnectLeft,
+      onDisconnect: paneActions.onDisconnectLeft,
+      onNavigateTo: paneActions.onNavigateToLeft,
+      onNavigateUp: paneActions.onNavigateUpLeft,
+      onRefresh: paneActions.onRefreshLeft,
+      onSetFilenameEncoding: paneActions.onSetFilenameEncodingLeft,
+      onOpenEntry: fileOps.onOpenEntryLeft,
+      onToggleSelection: paneActions.onToggleSelectionLeft,
+      onRangeSelect: paneActions.onRangeSelectLeft,
+      onClearSelection: paneActions.onClearSelectionLeft,
+      onSetFilter: paneActions.onSetFilterLeft,
+      onCreateDirectory: paneActions.onCreateDirectoryLeft,
+      onCreateFile: paneActions.onCreateFileLeft,
+      onDeleteFiles: paneActions.onDeleteFilesLeft,
+      onRenameFile: paneActions.onRenameFileLeft,
+      onCopyToOtherPane: paneActions.onCopyToOtherPaneLeft,
+      onReceiveFromOtherPane: paneActions.onReceiveFromOtherPaneLeft,
+      onEditPermissions: fileOps.onEditPermissionsLeft,
+      onEditFile: fileOps.onEditFileLeft,
+      onOpenFile: fileOps.onOpenFileLeft,
+      onOpenFileWith: fileOps.onOpenFileWithLeft,
+      onDownloadFile: fileOps.onDownloadFileLeft,
+      onUploadExternalFiles: fileOps.onUploadExternalFilesLeft,
+    }),
+    [],
+  );
+
+  const rightCallbacks = useMemo<SftpPaneCallbacks>(
+    () => ({
+      onConnect: paneActions.onConnectRight,
+      onDisconnect: paneActions.onDisconnectRight,
+      onNavigateTo: paneActions.onNavigateToRight,
+      onNavigateUp: paneActions.onNavigateUpRight,
+      onRefresh: paneActions.onRefreshRight,
+      onSetFilenameEncoding: paneActions.onSetFilenameEncodingRight,
+      onOpenEntry: fileOps.onOpenEntryRight,
+      onToggleSelection: paneActions.onToggleSelectionRight,
+      onRangeSelect: paneActions.onRangeSelectRight,
+      onClearSelection: paneActions.onClearSelectionRight,
+      onSetFilter: paneActions.onSetFilterRight,
+      onCreateDirectory: paneActions.onCreateDirectoryRight,
+      onCreateFile: paneActions.onCreateFileRight,
+      onDeleteFiles: paneActions.onDeleteFilesRight,
+      onRenameFile: paneActions.onRenameFileRight,
+      onCopyToOtherPane: paneActions.onCopyToOtherPaneRight,
+      onReceiveFromOtherPane: paneActions.onReceiveFromOtherPaneRight,
+      onEditPermissions: fileOps.onEditPermissionsRight,
+      onEditFile: fileOps.onEditFileRight,
+      onOpenFile: fileOps.onOpenFileRight,
+      onOpenFileWith: fileOps.onOpenFileWithRight,
+      onDownloadFile: fileOps.onDownloadFileRight,
+      onUploadExternalFiles: fileOps.onUploadExternalFilesRight,
+    }),
+    [],
+  );
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  return {
+    leftCallbacks,
+    rightCallbacks,
+    dragCallbacks: paneActions.dragCallbacks,
+    draggedFiles: paneActions.draggedFiles,
+    permissionsState: fileOps.permissionsState,
+    setPermissionsState: fileOps.setPermissionsState,
+    showTextEditor: fileOps.showTextEditor,
+    setShowTextEditor: fileOps.setShowTextEditor,
+    textEditorTarget: fileOps.textEditorTarget,
+    setTextEditorTarget: fileOps.setTextEditorTarget,
+    textEditorContent: fileOps.textEditorContent,
+    setTextEditorContent: fileOps.setTextEditorContent,
+    loadingTextContent: fileOps.loadingTextContent,
+    showFileOpenerDialog: fileOps.showFileOpenerDialog,
+    setShowFileOpenerDialog: fileOps.setShowFileOpenerDialog,
+    fileOpenerTarget: fileOps.fileOpenerTarget,
+    setFileOpenerTarget: fileOps.setFileOpenerTarget,
+    handleSaveTextFile: fileOps.handleSaveTextFile,
+    handleFileOpenerSelect: fileOps.handleFileOpenerSelect,
+    handleSelectSystemApp: fileOps.handleSelectSystemApp,
+  };
+};

components/sftp/hooks/useSftpViewTabs.ts

@@ -0,0 +1,159 @@
+import React, { useCallback, useMemo, useState } from "react";
+import type { MutableRefObject } from "react";
+import type { Host } from "../../../types";
+import type { SftpStateApi } from "../../../application/state/useSftpState";
+
+interface UseSftpViewTabsParams {
+  sftp: SftpStateApi;
+  sftpRef: MutableRefObject<SftpStateApi>;
+}
+
+interface UseSftpViewTabsResult {
+  leftPanes: SftpStateApi["leftPane"][];
+  rightPanes: SftpStateApi["rightPane"][];
+  leftTabsInfo: { id: string; label: string; isLocal: boolean; hostId: string | null }[];
+  rightTabsInfo: { id: string; label: string; isLocal: boolean; hostId: string | null }[];
+  showHostPickerLeft: boolean;
+  showHostPickerRight: boolean;
+  hostSearchLeft: string;
+  hostSearchRight: string;
+  setShowHostPickerLeft: React.Dispatch<React.SetStateAction<boolean>>;
+  setShowHostPickerRight: React.Dispatch<React.SetStateAction<boolean>>;
+  setHostSearchLeft: React.Dispatch<React.SetStateAction<string>>;
+  setHostSearchRight: React.Dispatch<React.SetStateAction<string>>;
+  handleAddTabLeft: () => void;
+  handleAddTabRight: () => void;
+  handleCloseTabLeft: (tabId: string) => void;
+  handleCloseTabRight: (tabId: string) => void;
+  handleSelectTabLeft: (tabId: string) => void;
+  handleSelectTabRight: (tabId: string) => void;
+  handleReorderTabsLeft: (draggedId: string, targetId: string, position: "before" | "after") => void;
+  handleReorderTabsRight: (draggedId: string, targetId: string, position: "before" | "after") => void;
+  handleMoveTabFromLeftToRight: (tabId: string) => void;
+  handleMoveTabFromRightToLeft: (tabId: string) => void;
+  handleHostSelectLeft: (host: Host | "local") => void;
+  handleHostSelectRight: (host: Host | "local") => void;
+}
+
+export const useSftpViewTabs = ({ sftp, sftpRef }: UseSftpViewTabsParams): UseSftpViewTabsResult => {
+  const [showHostPickerLeft, setShowHostPickerLeft] = useState(false);
+  const [showHostPickerRight, setShowHostPickerRight] = useState(false);
+  const [hostSearchLeft, setHostSearchLeft] = useState("");
+  const [hostSearchRight, setHostSearchRight] = useState("");
+
+  const handleAddTabLeft = useCallback(() => {
+    sftpRef.current.addTab("left");
+    setShowHostPickerLeft(true);
+  }, [sftpRef]);
+
+  const handleAddTabRight = useCallback(() => {
+    sftpRef.current.addTab("right");
+    setShowHostPickerRight(true);
+  }, [sftpRef]);
+
+  const handleCloseTabLeft = useCallback((tabId: string) => {
+    sftpRef.current.closeTab("left", tabId);
+  }, [sftpRef]);
+
+  const handleCloseTabRight = useCallback((tabId: string) => {
+    sftpRef.current.closeTab("right", tabId);
+  }, [sftpRef]);
+
+  const handleSelectTabLeft = useCallback((tabId: string) => {
+    sftpRef.current.selectTab("left", tabId);
+  }, [sftpRef]);
+
+  const handleSelectTabRight = useCallback((tabId: string) => {
+    sftpRef.current.selectTab("right", tabId);
+  }, [sftpRef]);
+
+  const leftPanes = useMemo(
+    () => (sftp.leftTabs.tabs.length > 0 ? sftp.leftTabs.tabs : [sftp.leftPane]),
+    [sftp.leftTabs.tabs, sftp.leftPane],
+  );
+  const rightPanes = useMemo(
+    () => (sftp.rightTabs.tabs.length > 0 ? sftp.rightTabs.tabs : [sftp.rightPane]),
+    [sftp.rightTabs.tabs, sftp.rightPane],
+  );
+
+  const handleReorderTabsLeft = useCallback(
+    (draggedId: string, targetId: string, position: "before" | "after") => {
+      sftpRef.current.reorderTabs("left", draggedId, targetId, position);
+    },
+    [sftpRef],
+  );
+
+  const handleReorderTabsRight = useCallback(
+    (draggedId: string, targetId: string, position: "before" | "after") => {
+      sftpRef.current.reorderTabs("right", draggedId, targetId, position);
+    },
+    [sftpRef],
+  );
+
+  const handleMoveTabFromLeftToRight = useCallback((tabId: string) => {
+    sftpRef.current.moveTabToOtherSide("left", tabId);
+  }, [sftpRef]);
+
+  const handleMoveTabFromRightToLeft = useCallback((tabId: string) => {
+    sftpRef.current.moveTabToOtherSide("right", tabId);
+  }, [sftpRef]);
+
+  const handleHostSelectLeft = useCallback((host: Host | "local") => {
+    sftpRef.current.connect("left", host);
+    setShowHostPickerLeft(false);
+  }, [sftpRef]);
+
+  const handleHostSelectRight = useCallback((host: Host | "local") => {
+    sftpRef.current.connect("right", host);
+    setShowHostPickerRight(false);
+  }, [sftpRef]);
+
+  const leftTabsInfo = useMemo(
+    () =>
+      sftp.leftTabs.tabs.map((pane) => ({
+        id: pane.id,
+        label: pane.connection?.hostLabel || "New Tab",
+        isLocal: pane.connection?.isLocal || false,
+        hostId: pane.connection?.hostId || null,
+      })),
+    [sftp.leftTabs.tabs],
+  );
+
+  const rightTabsInfo = useMemo(
+    () =>
+      sftp.rightTabs.tabs.map((pane) => ({
+        id: pane.id,
+        label: pane.connection?.hostLabel || "New Tab",
+        isLocal: pane.connection?.isLocal || false,
+        hostId: pane.connection?.hostId || null,
+      })),
+    [sftp.rightTabs.tabs],
+  );
+
+  return {
+    leftPanes,
+    rightPanes,
+    leftTabsInfo,
+    rightTabsInfo,
+    showHostPickerLeft,
+    showHostPickerRight,
+    hostSearchLeft,
+    hostSearchRight,
+    setShowHostPickerLeft,
+    setShowHostPickerRight,
+    setHostSearchLeft,
+    setHostSearchRight,
+    handleAddTabLeft,
+    handleAddTabRight,
+    handleCloseTabLeft,
+    handleCloseTabRight,
+    handleSelectTabLeft,
+    handleSelectTabRight,
+    handleReorderTabsLeft,
+    handleReorderTabsRight,
+    handleMoveTabFromLeftToRight,
+    handleMoveTabFromRightToLeft,
+    handleHostSelectLeft,
+    handleHostSelectRight,
+  };
+};