Merge pull request #339 from binaricat/feat/toolbar-tooltips

ui: add styled tooltips to terminal and SFTP toolbar buttons

.github/workflows/build.yml

@@ -59,12 +59,12 @@ jobs:
       - name: Build package
         env:
           ELECTRON_BUILDER_PUBLISH: "never"
-          # macOS code signing & notarization (ignored on other platforms)
-          CSC_LINK: ${{ secrets.MAC_CSC_LINK }}
-          CSC_KEY_PASSWORD: ${{ secrets.MAC_CSC_KEY_PASSWORD }}
-          APPLE_ID: ${{ secrets.APPLE_ID }}
-          APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_APP_SPECIFIC_PASSWORD }}
-          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+          # macOS code signing & notarization (only for macOS builds)
+          CSC_LINK: ${{ matrix.name == 'macos' && secrets.MAC_CSC_LINK || '' }}
+          CSC_KEY_PASSWORD: ${{ matrix.name == 'macos' && secrets.MAC_CSC_KEY_PASSWORD || '' }}
+          APPLE_ID: ${{ matrix.name == 'macos' && secrets.APPLE_ID || '' }}
+          APPLE_APP_SPECIFIC_PASSWORD: ${{ matrix.name == 'macos' && secrets.APPLE_APP_SPECIFIC_PASSWORD || '' }}
+          APPLE_TEAM_ID: ${{ matrix.name == 'macos' && secrets.APPLE_TEAM_ID || '' }}
         run: npm run ${{ matrix.pack_script }}
 
       - name: Upload artifacts
@@ -73,12 +73,15 @@ jobs:
           name: netcatty-${{ matrix.name }}
           path: |
             release/*.dmg
+            release/*.zip
             release/*.exe
             release/*.msi
             release/*.AppImage
             release/*.deb
             release/*.rpm
             release/*.tar.gz
+            release/*.yml
+            release/*.blockmap
           if-no-files-found: ignore
 
   # Linux x64 — builds directly on ubuntu-latest (no container).
@@ -130,6 +133,8 @@ jobs:
             release/*.AppImage
             release/*.deb
             release/*.rpm
+            release/*.yml
+            release/*.blockmap
           if-no-files-found: ignore
 
   # Dedicated job for Linux ARM64 — builds inside Debian Bullseye (GLIBC 2.31)
@@ -184,6 +189,8 @@ jobs:
             release/*.AppImage
             release/*.deb
             release/*.rpm
+            release/*.yml
+            release/*.blockmap
           if-no-files-found: ignore
 
   release:
@@ -219,10 +226,13 @@ jobs:
           body_path: release_notes.md
           files: |
             artifacts/*.dmg
+            artifacts/*.zip
             artifacts/*.exe
             artifacts/*.AppImage
             artifacts/*.deb
             artifacts/*.rpm
+            artifacts/*.yml
+            artifacts/*.blockmap
           generate_release_notes: true
           fail_on_unmatched_files: false
           token: ${{ secrets.RELEASE_TOKEN }}

.gitignore

@@ -37,3 +37,23 @@ coverage
 
 # Claude Code local settings
 /.claude/settings.local.json
+/CLAUDE.md
+
+# AI / Superpowers generated docs (local only)
+/docs/superpowers/
+
+# Dev-only electron-updater test config (not for production)
+/dev-app-update.yml
+
+# Test suite (local only, not committed)
+/tests/
+/vitest.config.ts
+
+# Serena MCP project config (local only)
+/.serena/
+
+# Windows VS Build environment scripts (local dev only)
+Directory.Build.props
+Directory.Build.targets
+build_with_vs.bat
+build_with_vs2022.bat

App.tsx

@@ -14,6 +14,7 @@ import { initializeUIFonts } from './application/state/uiFontStore';
 import { I18nProvider, useI18n } from './application/i18n/I18nProvider';
 import { matchesKeyBinding } from './domain/models';
 import { resolveHostAuth } from './domain/sshAuth';
+import { applySyncPayload } from './domain/syncPayload';
 import { getCredentialProtectionAvailability } from './infrastructure/services/credentialProtection';
 import { netcattyBridge } from './infrastructure/services/netcattyBridge';
 import { TopTabs } from './components/TopTabs';
@@ -167,8 +168,8 @@ function App({ settings }: { settings: SettingsState }) {
   const [passphraseQueue, setPassphraseQueue] = useState<PassphraseRequest[]>([]);
 
   const {
-    theme,
     setTheme,
+    resolvedTheme,
     setTerminalThemeId,
     currentTerminalTheme,
     terminalFontFamilyId,
@@ -179,6 +180,12 @@ function App({ settings }: { settings: SettingsState }) {
     hotkeyScheme,
     keyBindings,
     isHotkeyRecording,
+    sftpDoubleClickBehavior,
+    sftpAutoSync,
+    sftpShowHiddenFiles,
+    sftpUseCompressedUpload,
+    editorWordWrap,
+    setEditorWordWrap,
     sessionLogsEnabled,
     sessionLogsDir,
     sessionLogsFormat,
@@ -282,20 +289,14 @@ function App({ settings }: { settings: SettingsState }) {
     identities,
     snippets,
     customGroups,
+    snippetPackages,
     portForwardingRules: portForwardingRulesForSync,
     knownHosts,
     onApplyPayload: (payload) => {
-      importDataFromString(JSON.stringify({
-        hosts: payload.hosts,
-        keys: payload.keys,
-        identities: payload.identities,
-        snippets: payload.snippets,
-        customGroups: payload.customGroups,
-      }));
-
-      if (payload.portForwardingRules) {
-        importPortForwardingRules(payload.portForwardingRules);
-      }
+      applySyncPayload(payload, {
+        importVaultData: importDataFromString,
+        importPortForwardingRules,
+      });
     },
   });
 
@@ -310,10 +311,15 @@ function App({ settings }: { settings: SettingsState }) {
   }, [handleSyncNow]);
 
   // Update check hook - checks for new versions on startup
-  const { updateState, openReleasePage, dismissUpdate } = useUpdateCheck();
+  const { updateState, dismissUpdate, openReleasePage, installUpdate } = useUpdateCheck();
 
-  // Show toast notification when update is available
+  // Window controls - must be before update toast effect which uses openSettingsWindow
+  const { openSettingsWindow } = useWindowControls();
+
+  // Show toast notification when update is available (only when auto-download is idle)
   useEffect(() => {
+    // Skip "update available" toast if auto-download has already started or completed
+    if (updateState.autoDownloadStatus !== 'idle') return;
     if (updateState.hasUpdate && updateState.latestRelease) {
       const version = updateState.latestRelease.version;
       toast.info(
@@ -322,18 +328,55 @@ function App({ settings }: { settings: SettingsState }) {
           title: t('update.available.title'),
           duration: 8000, // Show longer for update notifications
           onClick: () => {
-            openReleasePage();
+            void openSettingsWindow();
+            // Dismiss the update so the toast doesn't re-fire on every render.
+            // On unsupported platforms (where autoDownloadStatus stays 'idle')
+            // this is the only way to suppress the notification for this version.
+            // On supported platforms this toast only shows before auto-download
+            // starts, and the Settings window's own useUpdateCheck will pick up
+            // the download state via IPC events independently of the dismiss.
             dismissUpdate();
           },
-          actionLabel: t('update.downloadNow'),
+          actionLabel: t('update.viewInSettings'),
         }
       );
     }
-  }, [updateState.hasUpdate, updateState.latestRelease, t, openReleasePage, dismissUpdate]);
+  }, [updateState.hasUpdate, updateState.latestRelease, updateState.autoDownloadStatus, t, openSettingsWindow, dismissUpdate]);
+
+  // Track previous autoDownloadStatus so toast effects fire only on actual transitions,
+  // not when unrelated deps (openReleasePage, installUpdate) change their reference.
+  const prevAutoDownloadStatusRef = useRef(updateState.autoDownloadStatus);
+  useEffect(() => {
+    const prev = prevAutoDownloadStatusRef.current;
+    prevAutoDownloadStatusRef.current = updateState.autoDownloadStatus;
+    if (prev === updateState.autoDownloadStatus) return;
+
+    if (updateState.autoDownloadStatus === 'ready') {
+      const version = updateState.latestRelease?.version ?? '';
+      toast.info(
+        t('update.readyToInstall.message', { version }),
+        {
+          title: t('update.readyToInstall.title'),
+          duration: 0,
+          actionLabel: t('update.restartNow'),
+          onClick: () => installUpdate(),
+        }
+      );
+    } else if (updateState.autoDownloadStatus === 'error') {
+      toast.error(
+        t('update.downloadFailed.message'),
+        {
+          title: t('update.downloadFailed.title'),
+          actionLabel: t('update.openReleases'),
+          onClick: () => openReleasePage(),
+        }
+      );
+    }
+  }, [updateState.autoDownloadStatus, updateState.latestRelease?.version, t, installUpdate, openReleasePage]);
 
   // Memoize keys for port forwarding to prevent unnecessary re-renders
   const portForwardingKeys = useMemo(
-    () => keys.map((k) => ({ id: k.id, privateKey: k.privateKey })),
+    () => keys.map((k) => ({ id: k.id, privateKey: k.privateKey, passphrase: k.passphrase, })),
     [keys]
   );
 
@@ -402,7 +445,7 @@ function App({ settings }: { settings: SettingsState }) {
         return;
       }
 
-      const keysForPf = keys.map((k) => ({ id: k.id, privateKey: k.privateKey }));
+      const keysForPf = keys.map((k) => ({ id: k.id, privateKey: k.privateKey, passphrase: k.passphrase }));
       if (start) {
         void startTunnel(rule, host, keysForPf, (status, error) => {
           if (status === "error" && error) toast.error(error);
@@ -1087,14 +1130,15 @@ function App({ settings }: { settings: SettingsState }) {
   }, [protocolSelectHost, handleConnectToHost]);
 
   const handleToggleTheme = useCallback(() => {
-    setTheme(prev => prev === 'dark' ? 'light' : 'dark');
-  }, [setTheme]);
+    // Toggle based on the actual rendered theme so clicking always produces a visible change,
+    // even when the stored preference is 'system'.
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+  }, [resolvedTheme, setTheme]);
 
   const handleOpenQuickSwitcher = useCallback(() => {
     setIsQuickSwitcherOpen(true);
   }, []);
 
-  const { openSettingsWindow } = useWindowControls();
 
   const handleOpenSettings = useCallback(() => {
     void (async () => {
@@ -1162,7 +1206,8 @@ function App({ settings }: { settings: SettingsState }) {
   return (
     <div className="flex flex-col h-screen text-foreground font-sans netcatty-shell" onContextMenu={handleRootContextMenu}>
       <TopTabs
-        theme={theme}
+        theme={resolvedTheme}
+        hosts={hosts}
         sessions={sessions}
         orphanSessions={orphanSessions}
         workspaces={workspaces}
@@ -1236,6 +1281,7 @@ function App({ settings }: { settings: SettingsState }) {
           keys={keys}
           identities={identities}
           snippets={snippets}
+          snippetPackages={snippetPackages}
           sessions={sessions}
           workspaces={workspaces}
           knownHosts={knownHosts}
@@ -1268,6 +1314,13 @@ function App({ settings }: { settings: SettingsState }) {
           onSplitSession={splitSession}
           isBroadcastEnabled={isBroadcastEnabled}
           onToggleBroadcast={toggleBroadcast}
+          updateHosts={updateHosts}
+          sftpDoubleClickBehavior={sftpDoubleClickBehavior}
+          sftpAutoSync={sftpAutoSync}
+          sftpShowHiddenFiles={sftpShowHiddenFiles}
+          sftpUseCompressedUpload={sftpUseCompressedUpload}
+          editorWordWrap={editorWordWrap}
+          setEditorWordWrap={setEditorWordWrap}
         />
 
         {/* Log Views - readonly terminal replays */}

CHANGELOG.md

@@ -0,0 +1,32 @@
+# Changelog
+
+## [Unreleased] - 2026-03-11
+
+### 功能
+- 修复自动更新 IPC 事件仅发送到单个窗口的问题，改为广播所有窗口（主窗口 + 设置窗口均可收到）
+- 统一手动检查更新与自动更新的状态机，消除三套并行状态
+- 手动"检查更新"通过 GitHub API 检测版本，发现更新后异步触发 electron-updater 下载
+- 设置窗口中点击"检查更新"后，下载进度可实时反映在 UI 中
+- 应用启动后 5 秒自动触发 `electron-updater` 检查更新，无需用户手动点击
+- 发现新版本后自动开始下载（`autoDownload=true`）
+- 下载完成后弹出持久 toast 通知，用户点击"立即重启"即可安装
+- 下载失败时弹出错误 toast，提供"打开 Releases"降级入口
+- Settings > System 进度条实时展示自动下载进度，由 `useUpdateCheck` 统一驱动
+- Linux deb/rpm/snap 等不支持 electron-updater 的平台自动跳过，保持原有 GitHub API 通知行为
+
+### 设计原理
+- `broadcastToAllWindows` 替换 `getSenderWindow` 单点发送，保证所有窗口都能收到 IPC 事件
+- `manualCheckStatus` 字段追踪手动检查 UI 状态（idle/checking/available/up-to-date/error），与 `autoDownloadStatus` 在 UI 层按优先级渲染
+- `SettingsSystemTab` 不再持有本地 update state，单向接收 `useUpdateCheck` 统一数据
+- 将原有两套独立系统（GitHub API 通知 + electron-updater 手动下载）合并为统一状态机：`useUpdateCheck` 作为唯一事实来源，同时驱动 `App.tsx` toast 和 `SettingsSystemTab` 进度条
+- 全局持久化 IPC 监听器在 `autoUpdateBridge.init()` 时一次性注册，避免每次手动下载请求重复注册/清理监听器
+- `autoInstallOnAppQuit=false`，不做静默安装，由用户主动触发重启
+
+### 接口变更（SettingsSystemTabProps）
+- 移除：`autoDownloadStatus`、`downloadPercent`
+- 新增：`updateState`（完整 UpdateState）、`checkNow`、`installUpdate`、`openReleasePage`
+
+### 注意事项
+- `checkNow` 语义：使用 GitHub API（`performCheck`）检测是否有新版本，若发现更新且 electron-updater 尚未开始下载，则异步触发 `bridge.checkForUpdate()` 启动自动下载流程
+- 此功能仅对打包后的应用（Windows NSIS、macOS dmg/zip、Linux AppImage）生效，dev 模式需配合 `forceDevUpdateConfig=true` + `dev-app-update.yml` 测试（见 `.gitignore`）
+- `hasUpdate` 旧 toast 在 `autoDownloadStatus !== 'idle'` 时自动抑制，避免与新 toast 重复

application/i18n/locales/en.ts

@@ -34,6 +34,7 @@ const en: Messages = {
   'common.advanced': 'Advanced',
   'common.left': 'Left',
   'common.right': 'Right',
+  'common.more': 'More',
   'common.selectAHost': 'Select a host',
   'common.selectAHostPlaceholder': 'Select a host...',
   'sort.az': 'A-z',
@@ -93,6 +94,27 @@ const en: Messages = {
   'settings.system.credentials.unavailableHint': 'Credentials encrypted on another user profile or machine cannot be decrypted here. Re-enter and save credentials on this device.',
   'settings.system.credentials.portabilityHint': 'Cloud Sync is portable because it uses your master key encryption. Local safeStorage encryption is device/user scoped.',
 
+  // Settings > System > Software Update
+  'settings.update.title': 'Software Update',
+  'settings.update.currentVersion': 'Current version',
+  'settings.update.checkForUpdates': 'Check for Updates',
+  'settings.update.checking': 'Checking...',
+  'settings.update.upToDate': 'You are using the latest version.',
+  'settings.update.available': 'New version {version} is available.',
+  'settings.update.download': 'Download Update',
+  'settings.update.downloading': 'Downloading... {percent}%',
+  'settings.update.readyToInstall': 'Update downloaded and ready to install.',
+  'settings.update.restartNow': 'Restart to Update',
+  'settings.update.error': 'Failed to check for updates.',
+  'settings.update.downloadError': 'Download failed.',
+  'settings.update.manualDownload': 'Download from GitHub',
+  'settings.update.manualDownloadHint': 'Auto-update is not available on this platform. Download the latest version from GitHub.',
+  'settings.update.hint': 'Netcatty checks for updates from GitHub Releases.',
+  'settings.update.lastCheckedJustNow': 'just now',
+  'settings.update.lastCheckedMinutesAgo': '{n} min ago',
+  'settings.update.lastCheckedHoursAgo': '{n} hr ago',
+  'settings.update.lastCheckedPrefix': 'Last checked: ',
+
   // Settings > Session Logs
   'settings.sessionLogs.title': 'Session Logs',
   'settings.sessionLogs.description': 'Configure session log export and auto-save settings.',
@@ -159,13 +181,23 @@ const en: Messages = {
   'update.upToDate.message': 'You are running the latest version ({version}).',
   'update.error': 'Failed to check for updates',
   'update.downloadNow': 'Download Now',
+  'update.viewInSettings': 'View in Settings',
+  'update.readyToInstall.title': 'Update Ready',
+  'update.readyToInstall.message': 'Version {version} downloaded and ready to install.',
+  'update.restartNow': 'Restart Now',
+  'update.downloadFailed.title': 'Update Failed',
+  'update.downloadFailed.message': 'Failed to download update. You can download it manually.',
+  'update.openReleases': 'Open Releases',
   'update.remindLater': 'Remind Later',
   'update.skipVersion': 'Skip This Version',
 
   // Settings > Appearance
   'settings.appearance.uiTheme': 'UI Theme',
-  'settings.appearance.darkMode': 'Dark Mode',
-  'settings.appearance.darkMode.desc': 'Toggle between light and dark theme',
+  'settings.appearance.theme': 'Theme',
+  'settings.appearance.theme.desc': 'Choose light, dark, or follow system preference',
+  'settings.appearance.theme.light': 'Light',
+  'settings.appearance.theme.dark': 'Dark',
+  'settings.appearance.theme.system': 'System',
   'settings.appearance.accentColor': 'Accent Color',
   'settings.appearance.customColor': 'Custom color',
   'settings.appearance.accentColor.mode': 'Use custom accent',
@@ -226,7 +258,7 @@ const en: Messages = {
   'settings.terminal.behavior.rightClick.paste': 'Paste',
   'settings.terminal.behavior.rightClick.selectWord': 'Select word',
   'settings.terminal.behavior.copyOnSelect': 'Copy on select',
-  'settings.terminal.behavior.copyOnSelect.desc': 'Automatically copy selected text',
+  'settings.terminal.behavior.copyOnSelect.desc': 'Automatically copy selected text. In tmux/vim with mouse mode, hold Option on macOS or Shift on Windows/Linux to select',
   'settings.terminal.behavior.middleClickPaste': 'Middle-click paste',
   'settings.terminal.behavior.middleClickPaste.desc':
     'Paste clipboard content on middle-click',
@@ -564,7 +596,11 @@ const en: Messages = {
   'sftp.status.loading': 'Loading...',
   'sftp.status.uploading': 'Uploading...',
   'sftp.status.ready': 'Ready',
+  'sftp.transfers': 'Transfers',
+  'sftp.transfers.active': '{count} active',
+  'sftp.transfers.clearCompleted': 'Clear completed',
   'sftp.goUp': 'Go up',
+  'sftp.goToTerminalCwd': 'Go to terminal directory',
   'sftp.encoding.label': 'Filename Encoding',
   'sftp.encoding.auto': 'Auto',
   'sftp.encoding.utf8': 'UTF-8',
@@ -707,6 +743,7 @@ const en: Messages = {
   'sftp.upload.currentFile': 'Current: {fileName}',
   'sftp.upload.cancelled': 'Upload cancelled',
   'sftp.upload.cancel': 'Cancel',
+  'sftp.upload.completedToPath': 'Uploaded to {path}',
 
   // SFTP Download
   'sftp.download.completed': 'Downloaded',
@@ -723,9 +760,9 @@ const en: Messages = {
 
   // Settings > SFTP Show Hidden Files
   'settings.sftp.showHiddenFiles': 'Show hidden files',
-  'settings.sftp.showHiddenFiles.desc': 'Display files with the Windows hidden attribute in the SFTP file browser when browsing local Windows filesystem.',
+  'settings.sftp.showHiddenFiles.desc': 'Display hidden files (dotfiles on Unix/macOS and files with the hidden attribute on Windows) in the SFTP file browser.',
   'settings.sftp.showHiddenFiles.enable': 'Show hidden files',
-  'settings.sftp.showHiddenFiles.enableDesc': 'Display Windows hidden files when browsing local filesystem',
+  'settings.sftp.showHiddenFiles.enableDesc': 'Display hidden files when browsing both local and remote filesystems',
 
   // Settings > SFTP Compressed Upload
   'settings.sftp.compressedUpload': 'Folder Compression Transfer',
@@ -1089,6 +1126,7 @@ const en: Messages = {
   'cloudSync.webdav.password': 'Password',
   'cloudSync.webdav.token': 'Token',
   'cloudSync.webdav.showSecret': 'Show secret',
+  'cloudSync.webdav.allowInsecure': 'Allow insecure connection (ignore certificate errors)',
   'cloudSync.webdav.validation.endpoint': 'Enter a valid WebDAV endpoint.',
   'cloudSync.webdav.validation.credentials': 'Username and password are required.',
   'cloudSync.webdav.validation.token': 'Token is required.',

application/i18n/locales/zh-CN.ts

@@ -22,6 +22,7 @@ const zhCN: Messages = {
   'common.use': '使用',
   'common.left': '左侧',
   'common.right': '右侧',
+  'common.more': '更多',
   'common.selectAHost': '选择主机',
   'sort.az': 'A-z',
   'sort.za': 'Z-a',
@@ -77,6 +78,27 @@ const zhCN: Messages = {
   'settings.system.credentials.unavailableHint': '在其他用户或机器上加密的凭据无法在此处解密。请在当前设备重新输入并保存凭据。',
   'settings.system.credentials.portabilityHint': '云同步可跨设备，因为使用主密钥加密；本地 safeStorage 加密仅绑定当前系统用户/设备。',
 
+  // Settings > System > Software Update
+  'settings.update.title': '软件更新',
+  'settings.update.currentVersion': '当前版本',
+  'settings.update.checkForUpdates': '检查更新',
+  'settings.update.checking': '检查中...',
+  'settings.update.upToDate': '当前已是最新版本。',
+  'settings.update.available': '新版本 {version} 已发布。',
+  'settings.update.download': '下载更新',
+  'settings.update.downloading': '正在下载... {percent}%',
+  'settings.update.readyToInstall': '更新已下载，准备安装。',
+  'settings.update.restartNow': '重启并更新',
+  'settings.update.error': '检查更新失败。',
+  'settings.update.downloadError': '下载失败。',
+  'settings.update.manualDownload': '前往 GitHub 下载',
+  'settings.update.manualDownloadHint': '当前平台不支持自动更新，请前往 GitHub 下载最新版本。',
+  'settings.update.hint': 'Netcatty 从 GitHub Releases 检查更新。',
+  'settings.update.lastCheckedJustNow': '刚刚',
+  'settings.update.lastCheckedMinutesAgo': '{n} 分钟前',
+  'settings.update.lastCheckedHoursAgo': '{n} 小时前',
+  'settings.update.lastCheckedPrefix': '上次检查：',
+
   // Settings > Session Logs
   'settings.sessionLogs.title': '会话日志',
   'settings.sessionLogs.description': '配置会话日志导出和自动保存设置。',
@@ -143,13 +165,23 @@ const zhCN: Messages = {
   'update.upToDate.message': '当前版本 ({version}) 已是最新。',
   'update.error': '检查更新失败',
   'update.downloadNow': '立即下载',
+  'update.viewInSettings': '在设置中查看',
+  'update.readyToInstall.title': '更新已就绪',
+  'update.readyToInstall.message': '版本 {version} 已下载完成，准备安装。',
+  'update.restartNow': '立即重启',
+  'update.downloadFailed.title': '更新失败',
+  'update.downloadFailed.message': '下载更新失败，可前往 GitHub 手动下载。',
+  'update.openReleases': '打开 Releases',
   'update.remindLater': '稍后提醒',
   'update.skipVersion': '跳过此版本',
 
   // Settings > Appearance
   'settings.appearance.uiTheme': '界面主题',
-  'settings.appearance.darkMode': '深色模式',
-  'settings.appearance.darkMode.desc': '在浅色与深色主题之间切换',
+  'settings.appearance.theme': '主题',
+  'settings.appearance.theme.desc': '选择浅色、深色或跟随系统设置',
+  'settings.appearance.theme.light': '浅色',
+  'settings.appearance.theme.dark': '深色',
+  'settings.appearance.theme.system': '系统',
   'settings.appearance.accentColor': '强调色',
   'settings.appearance.customColor': '自定义颜色',
   'settings.appearance.accentColor.mode': '使用自定义强调色',
@@ -402,7 +434,11 @@ const zhCN: Messages = {
   'sftp.status.loading': '加载中...',
   'sftp.status.uploading': '上传中...',
   'sftp.status.ready': '就绪',
+  'sftp.transfers': '传输',
+  'sftp.transfers.active': '{count} 个进行中',
+  'sftp.transfers.clearCompleted': '清除已完成',
   'sftp.goUp': '上一级',
+  'sftp.goToTerminalCwd': '定位到终端当前目录',
   'sftp.encoding.label': '文件名编码',
   'sftp.encoding.auto': '自动',
   'sftp.encoding.utf8': 'UTF-8',
@@ -771,6 +807,7 @@ const zhCN: Messages = {
   'cloudSync.webdav.password': '密码',
   'cloudSync.webdav.token': 'Token',
   'cloudSync.webdav.showSecret': '显示密钥',
+  'cloudSync.webdav.allowInsecure': '允许不安全的连接（忽略证书错误）',
   'cloudSync.webdav.validation.endpoint': '请输入有效的 WebDAV 端点。',
   'cloudSync.webdav.validation.credentials': '请输入用户名和密码。',
   'cloudSync.webdav.validation.token': '请输入 Token。',
@@ -1032,6 +1069,7 @@ const zhCN: Messages = {
   'sftp.upload.currentFile': '当前: {fileName}',
   'sftp.upload.cancelled': '上传已取消',
   'sftp.upload.cancel': '取消',
+  'sftp.upload.completedToPath': '已上传至 {path}',
 
   // SFTP Download
   'sftp.download.completed': '已下载',
@@ -1048,9 +1086,9 @@ const zhCN: Messages = {
 
   // Settings > SFTP Show Hidden Files
   'settings.sftp.showHiddenFiles': '显示隐藏文件',
-  'settings.sftp.showHiddenFiles.desc': '在浏览本地 Windows 文件系统时，显示具有 Windows 隐藏属性的文件。',
+  'settings.sftp.showHiddenFiles.desc': '在 SFTP 文件浏览器中显示隐藏文件（Unix/macOS 点文件和 Windows 隐藏属性文件）。',
   'settings.sftp.showHiddenFiles.enable': '显示隐藏文件',
-  'settings.sftp.showHiddenFiles.enableDesc': '浏览本地文件系统时显示 Windows 隐藏文件',
+  'settings.sftp.showHiddenFiles.enableDesc': '浏览本地和远程文件系统时显示隐藏文件',
 
   // Settings > SFTP Compressed Upload
   'settings.sftp.compressedUpload': '文件夹压缩传输',
@@ -1097,7 +1135,7 @@ const zhCN: Messages = {
   'settings.terminal.behavior.rightClick.paste': '粘贴',
   'settings.terminal.behavior.rightClick.selectWord': '选择单词',
   'settings.terminal.behavior.copyOnSelect': '选择即复制',
-  'settings.terminal.behavior.copyOnSelect.desc': '自动复制选中的文本',
+  'settings.terminal.behavior.copyOnSelect.desc': '自动复制选中的文本。在 tmux/vim 鼠标模式下，macOS 按住 Option，Windows/Linux 按住 Shift 拖选即可选中文本',
   'settings.terminal.behavior.middleClickPaste': '中键粘贴',
   'settings.terminal.behavior.middleClickPaste.desc': '中键点击时粘贴剪贴板内容',
   'settings.terminal.behavior.bracketedPaste': '括号粘贴模式',

application/state/customThemeStore.ts

@@ -22,7 +22,6 @@ type Listener = () => void;
 class CustomThemeStore {
     private themes: TerminalTheme[] = [];
     private listeners = new Set<Listener>();
-    private loaded = false;
     /** Cached merged array for stable useSyncExternalStore snapshots */
     private cachedAllThemes: TerminalTheme[] | null = null;
 
@@ -40,7 +39,6 @@ class CustomThemeStore {
         } catch {
             // ignore corrupt data
         }
-        this.loaded = true;
         this.cachedAllThemes = null; // invalidate cache
     };
 

application/state/sftp/sharedRemoteHostCache.ts

@@ -0,0 +1,52 @@
+import type { SftpFileEntry, SftpFilenameEncoding } from "../../../domain/models";
+
+interface SharedRemoteHostCacheEntry {
+  path: string;
+  homeDir: string;
+  files: SftpFileEntry[];
+  filenameEncoding: SftpFilenameEncoding;
+  updatedAt: number;
+}
+
+const SHARED_REMOTE_HOST_CACHE_TTL_MS = 60_000;
+
+const sharedRemoteHostCache = new Map<string, SharedRemoteHostCacheEntry>();
+
+/**
+ * Build a cache key that includes connection details so that the same host ID
+ * with different session-time overrides (port, protocol) uses separate entries.
+ */
+export const buildCacheKey = (
+  hostId: string,
+  hostname?: string,
+  port?: number,
+  protocol?: string,
+  sftpSudo?: boolean,
+  username?: string,
+): string => {
+  return `${hostId}:${hostname ?? ''}:${port ?? ''}:${protocol ?? ''}:${sftpSudo ? 'sudo' : ''}:${username ?? ''}`;
+};
+
+export const getSharedRemoteHostCache = (
+  cacheKey: string,
+): SharedRemoteHostCacheEntry | null => {
+  const entry = sharedRemoteHostCache.get(cacheKey);
+  if (!entry) return null;
+
+  if (Date.now() - entry.updatedAt > SHARED_REMOTE_HOST_CACHE_TTL_MS) {
+    sharedRemoteHostCache.delete(cacheKey);
+    return null;
+  }
+
+  return entry;
+};
+
+export const setSharedRemoteHostCache = (
+  cacheKey: string,
+  entry: Omit<SharedRemoteHostCacheEntry, "updatedAt">,
+): void => {
+  sharedRemoteHostCache.set(cacheKey, {
+    ...entry,
+    updatedAt: Date.now(),
+  });
+};

application/state/sftp/types.ts

@@ -10,6 +10,7 @@ export interface SftpPane {
   selectedFiles: Set<string>;
   filter: string;
   filenameEncoding: SftpFilenameEncoding;
+  showHiddenFiles: boolean;
 }
 
 // Multi-tab state for left and right sides
@@ -22,7 +23,10 @@ export interface SftpSideTabs {
 export const EMPTY_LEFT_PANE_ID = "__empty_left__";
 export const EMPTY_RIGHT_PANE_ID = "__empty_right__";
 
-export const createEmptyPane = (id?: string): SftpPane => ({
+export const createEmptyPane = (
+  id?: string,
+  showHiddenFiles = false,
+): SftpPane => ({
   id: id || crypto.randomUUID(),
   connection: null,
   files: [],
@@ -32,6 +36,7 @@ export const createEmptyPane = (id?: string): SftpPane => ({
   selectedFiles: new Set(),
   filter: "",
   filenameEncoding: "auto",
+  showHiddenFiles,
 });
 
 // File watch event types
@@ -53,4 +58,6 @@ export interface SftpStateOptions {
   onFileWatchSynced?: (event: FileWatchSyncedEvent) => void;
   onFileWatchError?: (event: FileWatchErrorEvent) => void;
   useCompressedUpload?: boolean;
+  defaultShowHiddenFiles?: boolean;
+  autoConnectLocalOnMount?: boolean;
 }

application/state/sftp/useSftpConnections.ts

@@ -5,6 +5,7 @@ import type { Host, Identity, SftpConnection, SftpFileEntry, SftpFilenameEncodin
 import type { SftpPane } from "./types";
 import { useSftpDirectoryListing } from "./useSftpDirectoryListing";
 import { useSftpHostCredentials } from "./useSftpHostCredentials";
+import { buildCacheKey, getSharedRemoteHostCache, setSharedRemoteHostCache } from "./sharedRemoteHostCache";
 
 interface UseSftpConnectionsParams {
   hosts: Host[];
@@ -24,14 +25,16 @@ interface UseSftpConnectionsParams {
   dirCacheRef: MutableRefObject<Map<string, { files: SftpFileEntry[]; timestamp: number }>>;
   sftpSessionsRef: MutableRefObject<Map<string, string>>;
   lastConnectedHostRef: MutableRefObject<{ left: Host | "local" | null; right: Host | "local" | null }>;
+  connectionCacheKeyMapRef: MutableRefObject<Map<string, string>>;
   reconnectingRef: MutableRefObject<{ left: boolean; right: boolean }>;
   makeCacheKey: (connectionId: string, path: string, encoding?: SftpFilenameEncoding) => string;
   clearCacheForConnection: (connectionId: string) => void;
-  createEmptyPane: (id?: string) => SftpPane;
+  createEmptyPane: (id?: string, showHiddenFiles?: boolean) => SftpPane;
+  autoConnectLocalOnMount?: boolean;
 }
 
 interface UseSftpConnectionsResult {
-  connect: (side: "left" | "right", host: Host | "local") => Promise<void>;
+  connect: (side: "left" | "right", host: Host | "local", options?: { forceNewTab?: boolean }) => Promise<void>;
   disconnect: (side: "left" | "right") => Promise<void>;
   listLocalFiles: (path: string) => Promise<SftpFileEntry[]>;
   listRemoteFiles: (sftpId: string, path: string, encoding?: SftpFilenameEncoding) => Promise<SftpFileEntry[]>;
@@ -55,22 +58,24 @@ export const useSftpConnections = ({
   dirCacheRef,
   sftpSessionsRef,
   lastConnectedHostRef,
+  connectionCacheKeyMapRef,
   reconnectingRef,
   makeCacheKey,
   clearCacheForConnection,
   createEmptyPane,
+  autoConnectLocalOnMount = true,
 }: UseSftpConnectionsParams): UseSftpConnectionsResult => {
   const getHostCredentials = useSftpHostCredentials({ hosts, keys, identities });
   const { listLocalFiles, listRemoteFiles } = useSftpDirectoryListing();
 
   const connect = useCallback(
-    async (side: "left" | "right", host: Host | "local") => {
+    async (side: "left" | "right", host: Host | "local", options?: { forceNewTab?: boolean }) => {
       const setTabs = side === "left" ? setLeftTabs : setRightTabs;
 
       let activeTabId: string | null = null;
       const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
 
-      if (!sideTabs.activeTabId) {
+      if (!sideTabs.activeTabId || options?.forceNewTab) {
         const newPane = createEmptyPane();
         activeTabId = newPane.id;
         setTabs((prev) => ({
@@ -89,6 +94,14 @@ export const useSftpConnections = ({
       const connectRequestId = navSeqRef.current[side];
 
       lastConnectedHostRef.current[side] = host;
+      // Store the cache key for this connection so pane actions can look it up
+      // by connectionId instead of relying on the per-side lastConnectedHostRef.
+      if (host !== "local") {
+        connectionCacheKeyMapRef.current.set(
+          connectionId,
+          buildCacheKey(host.id, host.hostname, host.port, host.protocol, host.sftpSudo, host.username),
+        );
+      }
 
       const currentPane = getActivePane(side);
       // Reset encoding to host's configured encoding or "auto" when connecting to a new host
@@ -96,18 +109,22 @@ export const useSftpConnections = ({
       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
+      // When forceNewTab is set, we're preserving the old tab for instant switching —
+      // don't close its SFTP session or clear its cache.
+      if (!options?.forceNewTab) {
+        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);
           }
-          sftpSessionsRef.current.delete(currentPane.connection.id);
         }
       }
 
@@ -162,22 +179,33 @@ export const useSftpConnections = ({
           }));
         }
       } else {
+        const hostCacheKey = buildCacheKey(host.id, host.hostname, host.port, host.protocol, host.sftpSudo, host.username);
+        const sharedHostCacheCandidate = getSharedRemoteHostCache(hostCacheKey);
+        const sharedHostCache =
+          sharedHostCacheCandidate?.filenameEncoding === filenameEncoding
+            ? sharedHostCacheCandidate
+            : null;
+        const cachedStartPath = sharedHostCache?.path ?? "/";
+
         const connection: SftpConnection = {
           id: connectionId,
           hostId: host.id,
           hostLabel: host.label,
           isLocal: false,
           status: "connecting",
-          currentPath: "/",
+          currentPath: cachedStartPath,
         };
 
         updateTab(side, activeTabId, (prev) => ({
           ...prev,
           connection,
+          // Always show loading while connecting — even with cached files.
+          // The cached file list is shown as a preview, but the pane stays
+          // non-interactive until the SFTP session is actually established.
           loading: true,
           reconnecting: prev.reconnecting,
           error: null,
-          files: prev.reconnecting ? prev.files : [],
+          files: prev.reconnecting ? prev.files : (sharedHostCache?.files ?? []),
           filenameEncoding, // Reset encoding for new connection
         }));
 
@@ -238,72 +266,137 @@ export const useSftpConnections = ({
 
           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;
+          let startPath = sharedHostCache?.path ?? "/";
+          let homeDir = sharedHostCache?.homeDir ?? startPath;
+
+          if (!sharedHostCache) {
+            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;
+                    homeDir = candidate;
+                    break;
+                  }
+                } catch {
+                  // Ignore missing/permission errors
                 }
-              } 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 === "/") {
+            } else {
+              if (credentials.username === "root") {
                 try {
                   const rootFiles = await netcattyBridge.get()?.listSftp(sftpId, "/root", filenameEncoding);
-                  if (rootFiles) startPath = "/root";
+                  if (rootFiles) {
+                    startPath = "/root";
+                    homeDir = "/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}`;
+                    homeDir = startPath;
+                  }
+                } catch {
+                  // Fall through to /root check
+                }
+                if (startPath === "/") {
+                  try {
+                    const rootFiles = await netcattyBridge.get()?.listSftp(sftpId, "/root", filenameEncoding);
+                    if (rootFiles) {
+                      startPath = "/root";
+                      homeDir = "/root";
+                    }
+                  } catch {
+                    // Fallback path not available
+                  }
+                }
+              } else {
+                try {
+                  const rootFiles = await netcattyBridge.get()?.listSftp(sftpId, "/root", filenameEncoding);
+                  if (rootFiles) {
+                    startPath = "/root";
+                    homeDir = "/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);
+          const provisionalCacheKey = sharedHostCache
+            ? makeCacheKey(connectionId, startPath, filenameEncoding)
+            : null;
+          if (sharedHostCache && provisionalCacheKey) {
+            dirCacheRef.current.set(provisionalCacheKey, {
+              files: sharedHostCache.files,
+              timestamp: Date.now(),
+            });
+          }
+
+          let files: SftpFileEntry[] = [];
+          try {
+            files = await listRemoteFiles(sftpId, startPath, filenameEncoding);
+          } catch {
+            // Cached path may be stale (deleted, permissions changed).
+            // Remove the provisional cache entry so phantom files don't resurface.
+            if (provisionalCacheKey) {
+              dirCacheRef.current.delete(provisionalCacheKey);
+            }
+            // Fall back to homeDir, then "/", chaining attempts.
+            let fallbackSucceeded = false;
+            if (sharedHostCache && startPath !== homeDir) {
+              try {
+                startPath = homeDir;
+                files = await listRemoteFiles(sftpId, startPath, filenameEncoding);
+                fallbackSucceeded = true;
+              } catch {
+                // homeDir also failed, try root
+              }
+            }
+            if (!fallbackSucceeded && startPath !== "/") {
+              try {
+                startPath = "/";
+                files = await listRemoteFiles(sftpId, startPath, filenameEncoding);
+                fallbackSucceeded = true;
+              } catch {
+                // root also failed
+              }
+            }
+            if (!fallbackSucceeded) {
+              throw new Error("Cannot list any remote directory");
+            }
+          }
           if (navSeqRef.current[side] !== connectRequestId) return;
           dirCacheRef.current.set(makeCacheKey(connectionId, startPath, filenameEncoding), {
             files,
             timestamp: Date.now(),
           });
+          setSharedRemoteHostCache(hostCacheKey, {
+            path: startPath,
+            homeDir,
+            files,
+            filenameEncoding,
+          });
 
           reconnectingRef.current[side] = false;
 
@@ -314,7 +407,7 @@ export const useSftpConnections = ({
                   ...prev.connection,
                   status: "connected",
                   currentPath: startPath,
-                  homeDir: startPath,
+                  homeDir,
                 }
               : null,
             files,
@@ -346,6 +439,7 @@ export const useSftpConnections = ({
       getActivePane,
       updateTab,
       clearCacheForConnection,
+      createEmptyPane,
       makeCacheKey,
       listLocalFiles,
       listRemoteFiles,
@@ -355,13 +449,17 @@ export const useSftpConnections = ({
   const initialConnectDoneRef = useRef(false);
 
   useEffect(() => {
-    if (!initialConnectDoneRef.current && leftTabs.tabs.length === 0) {
+    if (
+      autoConnectLocalOnMount &&
+      !initialConnectDoneRef.current &&
+      leftTabs.tabs.length === 0
+    ) {
       initialConnectDoneRef.current = true;
       setTimeout(() => {
         connect("left", "local");
       }, 0);
     }
-  }, [connect, leftTabs.tabs.length]);
+  }, [autoConnectLocalOnMount, connect, leftTabs.tabs.length]);
 
   useEffect(() => {
     const attemptReconnect = async (side: "left" | "right") => {
@@ -412,7 +510,7 @@ export const useSftpConnections = ({
         }
       }
 
-      updateTab(side, activeTabId, () => createEmptyPane(activeTabId));
+      updateTab(side, activeTabId, () => createEmptyPane(activeTabId, pane.showHiddenFiles));
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [getActivePane, clearCacheForConnection, updateTab],

application/state/sftp/useSftpExternalOperations.ts

@@ -7,11 +7,13 @@ import { joinPath } from "./utils";
 import {
   UploadController,
   uploadFromDataTransfer,
+  uploadEntriesDirect,
   UploadBridge,
   UploadCallbacks,
   UploadResult,
   UploadTaskInfo,
 } from "../../../lib/uploadService";
+import type { DropEntry } from "../../../lib/sftpFileUtils";
 
 // Re-export UploadResult for external usage
 export type { UploadResult };
@@ -20,6 +22,8 @@ interface UseSftpExternalOperationsParams {
   getActivePane: (side: "left" | "right") => SftpPane | null;
   refresh: (side: "left" | "right") => Promise<void>;
   sftpSessionsRef: React.MutableRefObject<Map<string, string>>;
+  connectionCacheKeyMapRef: React.MutableRefObject<Map<string, string>>;
+  clearDirCacheEntry?: (connectionId: string, path: string) => void;
   useCompressedUpload?: boolean;
   addExternalUpload?: (task: TransferTask) => void;
   updateExternalUpload?: (taskId: string, updates: Partial<TransferTask>) => void;
@@ -38,10 +42,16 @@ interface SftpExternalOperationsResult {
     appPath: string,
     options?: { enableWatch?: boolean }
   ) => Promise<{ localTempPath: string; watchId?: string }>;
+  activeFileWatchCountRef: React.MutableRefObject<number>;
   uploadExternalFiles: (
     side: "left" | "right",
     dataTransfer: DataTransfer
   ) => Promise<UploadResult[]>;
+  uploadExternalEntries: (
+    side: "left" | "right",
+    entries: DropEntry[],
+    options?: { targetPath?: string }
+  ) => Promise<UploadResult[]>;
   cancelExternalUpload: () => Promise<void>;
   selectApplication: () => Promise<{ path: string; name: string } | null>;
 }
@@ -53,6 +63,8 @@ export const useSftpExternalOperations = (
     getActivePane,
     refresh,
     sftpSessionsRef,
+    connectionCacheKeyMapRef,
+    clearDirCacheEntry,
     useCompressedUpload = false,
     addExternalUpload,
     updateExternalUpload,
@@ -63,6 +75,10 @@ export const useSftpExternalOperations = (
   // Upload controller for cancellation support
   const uploadControllerRef = useRef<UploadController | null>(null);
 
+  // Track active file watches so the side panel can block host-switching.
+  // Reset to 0 when the SFTP session disconnects (handled in SftpSidePanel).
+  const activeFileWatchCountRef = useRef(0);
+
   const readTextFile = useCallback(
     async (side: "left" | "right", filePath: string): Promise<string> => {
       const pane = getActivePane(side);
@@ -324,6 +340,7 @@ export const useSftpExternalOperations = (
             pane.filenameEncoding,
           );
           watchId = result.watchId;
+          activeFileWatchCountRef.current += 1;
         } catch (err) {
           console.warn("[SFTP] Failed to start file watch:", err);
         }
@@ -337,7 +354,9 @@ export const useSftpExternalOperations = (
   // Create upload callbacks that translate to TransferTask updates
   const createUploadCallbacks = useCallback((
     connectionId: string,
-    targetPath: string
+    targetPath: string,
+    targetHostId?: string,
+    targetConnectionKey?: string,
   ): UploadCallbacks => {
     return {
       onScanningStart: (taskId: string) => {
@@ -349,6 +368,8 @@ export const useSftpExternalOperations = (
             targetPath,
             sourceConnectionId: "external",
             targetConnectionId: connectionId,
+            targetHostId,
+            targetConnectionKey,
             direction: "upload",
             status: "pending" as TransferStatus,
             totalBytes: 0,
@@ -374,6 +395,8 @@ export const useSftpExternalOperations = (
             targetPath: joinPath(targetPath, task.fileName),
             sourceConnectionId: "external",
             targetConnectionId: connectionId,
+            targetHostId,
+            targetConnectionKey,
             direction: "upload",
             status: "transferring" as TransferStatus,
             totalBytes: task.totalBytes,
@@ -505,7 +528,12 @@ export const useSftpExternalOperations = (
       const controller = new UploadController();
       uploadControllerRef.current = controller;
 
-      const callbacks = createUploadCallbacks(pane.connection.id, pane.connection.currentPath);
+      const callbacks = createUploadCallbacks(
+        pane.connection.id,
+        pane.connection.currentPath,
+        pane.connection.isLocal ? undefined : pane.connection.hostId,
+        pane.connection.isLocal ? undefined : connectionCacheKeyMapRef.current.get(pane.connection.id),
+      );
 
       try {
         const results = await uploadFromDataTransfer(
@@ -532,6 +560,7 @@ export const useSftpExternalOperations = (
       }
     },
     [
+      connectionCacheKeyMapRef,
       getActivePane,
       refresh,
       sftpSessionsRef,
@@ -541,6 +570,90 @@ export const useSftpExternalOperations = (
     ],
   );
 
+  const uploadExternalEntries = useCallback(
+    async (
+      side: "left" | "right",
+      entries: DropEntry[],
+      options?: { targetPath?: string },
+    ): 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");
+      }
+
+      const controller = new UploadController();
+      uploadControllerRef.current = controller;
+      const uploadTargetPath = options?.targetPath || pane.connection.currentPath;
+
+      const callbacks = createUploadCallbacks(
+        pane.connection.id,
+        uploadTargetPath,
+        pane.connection.isLocal ? undefined : pane.connection.hostId,
+        pane.connection.isLocal ? undefined : connectionCacheKeyMapRef.current.get(pane.connection.id),
+      );
+      const directUploadBridge: UploadBridge = {
+        ...createUploadBridge,
+      };
+
+      try {
+        const results = await uploadEntriesDirect(
+          entries,
+          {
+            targetPath: uploadTargetPath,
+            sftpId,
+            isLocal: pane.connection.isLocal,
+            bridge: directUploadBridge,
+            joinPath,
+            callbacks,
+            useCompressedUpload,
+          },
+          controller,
+        );
+
+        // Refresh the current directory and invalidate the upload target's
+        // cache entry.  If the user navigated away during the upload, the
+        // invalidation ensures returning to the target path triggers a fresh
+        // listing instead of serving stale cached data.
+        const livePane = getActivePane(side);
+        if (livePane?.connection) {
+          if (livePane.connection.currentPath !== uploadTargetPath && clearDirCacheEntry) {
+            clearDirCacheEntry(livePane.connection.id, uploadTargetPath);
+          }
+          await refresh(side);
+        }
+        return results;
+      } catch (error) {
+        logger.error("[SFTP] Upload failed:", error);
+        throw error;
+      } finally {
+        uploadControllerRef.current = null;
+      }
+    },
+    [
+      clearDirCacheEntry,
+      connectionCacheKeyMapRef,
+      createUploadCallbacks,
+      createUploadBridge,
+      getActivePane,
+      refresh,
+      sftpSessionsRef,
+      useCompressedUpload,
+    ],
+  );
+
   const cancelExternalUpload = useCallback(async () => {
     const controller = uploadControllerRef.current;
     if (controller) {
@@ -566,7 +679,9 @@ export const useSftpExternalOperations = (
     writeTextFile,
     downloadToTempAndOpen,
     uploadExternalFiles,
+    uploadExternalEntries,
     cancelExternalUpload,
     selectApplication,
+    activeFileWatchCountRef,
   };
 };

application/state/sftp/useSftpPaneActions.ts

@@ -1,11 +1,13 @@
-import { useCallback } from "react";
+import { useCallback, useRef } 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";
+import { buildCacheKey, setSharedRemoteHostCache } from "./sharedRemoteHostCache";
 
 interface UseSftpPaneActionsParams {
+  hosts: Host[];
   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;
@@ -15,6 +17,7 @@ interface UseSftpPaneActionsParams {
   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 }>;
+  connectionCacheKeyMapRef: React.MutableRefObject<Map<string, string>>;
   reconnectingRef: React.MutableRefObject<{ left: boolean; right: boolean }>;
   makeCacheKey: (connectionId: string, path: string, encoding?: SftpFilenameEncoding) => string;
   clearCacheForConnection: (connectionId: string) => void;
@@ -50,6 +53,7 @@ interface UseSftpPaneActionsResult {
 }
 
 export const useSftpPaneActions = ({
+  hosts,
   getActivePane,
   updateTab,
   updateActiveTab,
@@ -59,6 +63,7 @@ export const useSftpPaneActions = ({
   dirCacheRef,
   sftpSessionsRef,
   lastConnectedHostRef,
+  connectionCacheKeyMapRef,
   reconnectingRef,
   makeCacheKey,
   clearCacheForConnection,
@@ -68,6 +73,43 @@ export const useSftpPaneActions = ({
   isSessionError,
   dirCacheTtlMs,
 }: UseSftpPaneActionsParams): UseSftpPaneActionsResult => {
+  // Build the shared cache key for the active pane. Prefer the last connected
+  // host (which includes session-time overrides), fall back to the vault hosts list.
+  const hostsRef = useRef(hosts);
+  hostsRef.current = hosts;
+  const getActivePaneCacheKey = useCallback((side: "left" | "right", hostId: string, connectionId?: string): string => {
+    // Prefer the per-connection cache key — it's set at connect time and
+    // correctly identifies the endpoint even when multiple tabs share the
+    // same hostId with different session-time overrides.
+    if (connectionId) {
+      const perConnKey = connectionCacheKeyMapRef.current.get(connectionId);
+      if (perConnKey) return perConnKey;
+    }
+    // Fallback: lastConnectedHostRef (per-side, may be stale for multi-tab)
+    const connHost = lastConnectedHostRef.current[side];
+    if (connHost && connHost !== "local" && connHost.id === hostId) {
+      return buildCacheKey(connHost.id, connHost.hostname, connHost.port, connHost.protocol, connHost.sftpSudo, connHost.username);
+    }
+    // Fall back to vault host
+    const host = hostsRef.current.find(h => h.id === hostId);
+    if (host) {
+      return buildCacheKey(host.id, host.hostname, host.port, host.protocol, host.sftpSudo, host.username);
+    }
+    return hostId;
+  }, [connectionCacheKeyMapRef, lastConnectedHostRef]);
+
+  // Track the latest navigation request ID per tab, so we can distinguish
+  // whether a superseded request was superseded by the same tab or a different tab.
+  const tabNavSeqRef = useRef(new Map<string, number>());
+
+  // Track the last confirmed (successfully loaded) state per tab, so that
+  // restore-on-error/supersede always reverts to a known-good state rather
+  // than an intermediate optimistic state from another in-flight navigation.
+  // Includes connectionId so stale entries from a previous host are ignored.
+  const lastConfirmedRef = useRef(
+    new Map<string, { connectionId: string; path: string; files: SftpFileEntry[]; selectedFiles: Set<string> }>(),
+  );
+
   const navigateTo = useCallback(
     async (
       side: "left" | "right",
@@ -92,8 +134,9 @@ export const useSftpPaneActions = ({
         return;
       }
 
+      const connectionId = pane.connection.id;
       const requestId = ++navSeqRef.current[side];
-      const cacheKey = makeCacheKey(pane.connection.id, path, pane.filenameEncoding);
+      const cacheKey = makeCacheKey(connectionId, path, pane.filenameEncoding);
       const cached = options?.force
         ? undefined
         : dirCacheRef.current.get(cacheKey);
@@ -104,6 +147,13 @@ export const useSftpPaneActions = ({
         cached.files
       ) {
         console.log("[SFTP navigateTo] Using cached files for path", { path, cacheKey });
+        tabNavSeqRef.current.set(activeTabId, requestId);
+        lastConfirmedRef.current.set(activeTabId, {
+          connectionId,
+          path,
+          files: cached.files,
+          selectedFiles: new Set(),
+        });
         updateTab(side, activeTabId, (prev) => ({
           ...prev,
           connection: prev.connection
@@ -114,11 +164,53 @@ export const useSftpPaneActions = ({
           error: null,
           selectedFiles: new Set(),
         }));
+        if (!pane.connection.isLocal) {
+          // Use hostId as the shared cache key — this is safe because the
+          // shared cache is a best-effort optimization and hostId uniquely
+          // identifies the connection in the common case. Session-time
+          // overrides create separate connections with distinct cache keys
+          // at the connect() layer.
+          setSharedRemoteHostCache(getActivePaneCacheKey(side, pane.connection.hostId, pane.connection.id), {
+            path,
+            homeDir: pane.connection.homeDir ?? path,
+            files: cached.files,
+            filenameEncoding: pane.filenameEncoding,
+          });
+        }
         return;
       }
 
       console.log("[SFTP navigateTo] Fetching files from server for path", { path });
-      updateTab(side, activeTabId, (prev) => ({ ...prev, loading: true, error: null }));
+      // Re-seed confirmed state whenever the pane is settled (not loading), or
+      // when the connection has changed. This captures post-mutation state from
+      // optimistic updates (e.g. deleteFilesAtPath) so that a failed refresh
+      // doesn't resurrect deleted items.
+      const existing = lastConfirmedRef.current.get(activeTabId);
+      if (!existing || existing.connectionId !== connectionId || !pane.loading) {
+        lastConfirmedRef.current.set(activeTabId, {
+          connectionId,
+          path: pane.connection.currentPath,
+          files: pane.files,
+          selectedFiles: pane.selectedFiles,
+        });
+      }
+      const confirmed = lastConfirmedRef.current.get(activeTabId)!;
+      const previousPath = confirmed.path;
+      const previousFiles = confirmed.files;
+      const previousSelection = confirmed.selectedFiles;
+      tabNavSeqRef.current.set(activeTabId, requestId);
+      // Keep existing files visible during loading — the loading overlay
+      // (pointer-events-none) prevents interaction. This avoids blanking a tab
+      // that gets superseded by another tab navigating on the same side.
+      updateTab(side, activeTabId, (prev) => ({
+        ...prev,
+        connection: prev.connection
+          ? { ...prev.connection, currentPath: path }
+          : null,
+        selectedFiles: new Set(),
+        loading: true,
+        error: null,
+      }));
 
       try {
         let files: SftpFileEntry[];
@@ -164,13 +256,42 @@ export const useSftpPaneActions = ({
           }
         }
 
-        if (navSeqRef.current[side] !== requestId) return;
+        if (navSeqRef.current[side] !== requestId) {
+          // Another navigation on this side superseded this request.
+          // Only restore if no newer navigation has occurred on this specific tab
+          // AND the tab still belongs to the same connection (connect/disconnect
+          // bump navSeqRef but not tabNavSeqRef).
+          if (tabNavSeqRef.current.get(activeTabId) !== requestId) {
+            return;
+          }
+          updateTab(side, activeTabId, (prev) => {
+            if (prev.connection?.id !== connectionId) {
+              // Tab was reconnected or disconnected; don't restore stale state.
+              return prev;
+            }
+            return {
+              ...prev,
+              connection: { ...prev.connection, currentPath: previousPath },
+              files: previousFiles,
+              selectedFiles: previousSelection,
+              loading: false,
+            };
+          });
+          return;
+        }
 
         dirCacheRef.current.set(cacheKey, {
           files,
           timestamp: Date.now(),
         });
 
+        lastConfirmedRef.current.set(activeTabId, {
+          connectionId,
+          path,
+          files,
+          selectedFiles: new Set(),
+        });
+
         updateTab(side, activeTabId, (prev) => ({
           ...prev,
           connection: prev.connection
@@ -180,18 +301,52 @@ export const useSftpPaneActions = ({
           loading: false,
           selectedFiles: new Set(),
         }));
+        if (!pane.connection.isLocal) {
+          setSharedRemoteHostCache(getActivePaneCacheKey(side, pane.connection.hostId, pane.connection.id), {
+            path,
+            homeDir: pane.connection.homeDir ?? path,
+            files,
+            filenameEncoding: pane.filenameEncoding,
+          });
+        }
       } 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,
-        }));
+        if (navSeqRef.current[side] !== requestId) {
+          if (tabNavSeqRef.current.get(activeTabId) !== requestId) {
+            return;
+          }
+          updateTab(side, activeTabId, (prev) => {
+            if (prev.connection?.id !== connectionId) {
+              return prev;
+            }
+            return {
+              ...prev,
+              connection: { ...prev.connection, currentPath: previousPath },
+              files: previousFiles,
+              selectedFiles: previousSelection,
+              loading: false,
+            };
+          });
+          return;
+        }
+        updateTab(side, activeTabId, (prev) => {
+          if (prev.connection?.id !== connectionId) {
+            return prev;
+          }
+          return {
+            ...prev,
+            connection: { ...prev.connection, currentPath: previousPath },
+            files: previousFiles,
+            selectedFiles: previousSelection,
+            error:
+              err instanceof Error ? err.message : "Failed to list directory",
+            loading: false,
+          };
+        });
       }
     },
     [
       getActivePane,
+      getActivePaneCacheKey,
       updateTab,
       leftTabsRef,
       rightTabsRef,

application/state/sftp/useSftpTabsState.ts

@@ -14,6 +14,7 @@ export interface SftpTabsState {
   getActivePane: (side: "left" | "right") => SftpPane | null;
   updateTab: (side: "left" | "right", tabId: string, updater: (pane: SftpPane) => SftpPane) => void;
   updateActiveTab: (side: "left" | "right", updater: (pane: SftpPane) => SftpPane) => void;
+  setTabShowHiddenFiles: (side: "left" | "right", tabId: string, showHiddenFiles: boolean) => void;
   addTab: (side: "left" | "right") => string;
   closeTab: (side: "left" | "right", tabId: string) => void;
   selectTab: (side: "left" | "right", tabId: string) => void;
@@ -33,7 +34,11 @@ export interface SftpTabsState {
   getActiveTabId: (side: "left" | "right") => string | null;
 }
 
-export const useSftpTabsState = (): SftpTabsState => {
+export const useSftpTabsState = ({
+  defaultShowHiddenFiles = false,
+}: {
+  defaultShowHiddenFiles?: boolean;
+} = {}): SftpTabsState => {
   const [leftTabs, setLeftTabs] = useState<SftpSideTabs>({
     tabs: [],
     activeTabId: null,
@@ -45,8 +50,10 @@ export const useSftpTabsState = (): SftpTabsState => {
 
   const leftTabsRef = useRef(leftTabs);
   const rightTabsRef = useRef(rightTabs);
+  const defaultShowHiddenFilesRef = useRef(defaultShowHiddenFiles);
   leftTabsRef.current = leftTabs;
   rightTabsRef.current = rightTabs;
+  defaultShowHiddenFilesRef.current = defaultShowHiddenFiles;
 
   const getActivePane = useCallback((side: "left" | "right"): SftpPane | null => {
     const sideTabs = side === "left" ? leftTabsRef.current : rightTabsRef.current;
@@ -58,14 +65,14 @@ export const useSftpTabsState = (): SftpTabsState => {
     const pane = leftTabs.activeTabId
       ? leftTabs.tabs.find((t) => t.id === leftTabs.activeTabId)
       : null;
-    return pane || createEmptyPane(EMPTY_LEFT_PANE_ID);
+    return pane || createEmptyPane(EMPTY_LEFT_PANE_ID, defaultShowHiddenFilesRef.current);
   }, [leftTabs]);
 
   const rightPane = useMemo(() => {
     const pane = rightTabs.activeTabId
       ? rightTabs.tabs.find((t) => t.id === rightTabs.activeTabId)
       : null;
-    return pane || createEmptyPane(EMPTY_RIGHT_PANE_ID);
+    return pane || createEmptyPane(EMPTY_RIGHT_PANE_ID, defaultShowHiddenFilesRef.current);
   }, [rightTabs]);
 
   const updateTab = useCallback(
@@ -88,9 +95,24 @@ export const useSftpTabsState = (): SftpTabsState => {
     [updateTab],
   );
 
+  const setTabShowHiddenFiles = useCallback(
+    (side: "left" | "right", tabId: string, showHiddenFiles: boolean) => {
+      updateTab(side, tabId, (prev) => {
+        if (prev.showHiddenFiles === showHiddenFiles) {
+          return prev;
+        }
+        return {
+          ...prev,
+          showHiddenFiles,
+        };
+      });
+    },
+    [updateTab],
+  );
+
   const addTab = useCallback(
     (side: "left" | "right") => {
-      const newPane = createEmptyPane();
+      const newPane = createEmptyPane(undefined, defaultShowHiddenFilesRef.current);
       const setTabs = side === "left" ? setLeftTabs : setRightTabs;
       setTabs((prev) => ({
         tabs: [...prev.tabs, newPane],
@@ -236,6 +258,7 @@ export const useSftpTabsState = (): SftpTabsState => {
     getActivePane,
     updateTab,
     updateActiveTab,
+    setTabShowHiddenFiles,
     addTab,
     closeTab,
     selectTab,

application/state/useAutoSync.ts

@@ -15,7 +15,10 @@ import { netcattyBridge } from '../../infrastructure/services/netcattyBridge';
 import {
   findSyncPayloadEncryptedCredentialPaths,
 } from '../../domain/credentials';
-import type { SyncPayload } from '../../domain/sync';
+import { isProviderReadyForSync, type CloudProvider, type SyncPayload } from '../../domain/sync';
+import { STORAGE_KEY_PORT_FORWARDING } from '../../infrastructure/config/storageKeys';
+import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
+import { getEffectiveKnownHosts } from '../../infrastructure/syncHelpers';
 import { toast } from '../../components/ui/toast';
 
 interface AutoSyncConfig {
@@ -25,6 +28,7 @@ interface AutoSyncConfig {
   identities?: SyncPayload['identities'];
   snippets: SyncPayload['snippets'];
   customGroups: SyncPayload['customGroups'];
+  snippetPackages?: SyncPayload['snippetPackages'];
   portForwardingRules?: SyncPayload['portForwardingRules'];
   knownHosts?: SyncPayload['knownHosts'];
   
@@ -34,6 +38,7 @@ interface AutoSyncConfig {
 
 // Get manager singleton for direct state access
 const manager = getCloudSyncManager();
+const AUTO_SYNC_PROVIDER_ORDER: CloudProvider[] = ['github', 'google', 'onedrive', 'webdav', 's3'];
 
 type SyncTrigger = 'auto' | 'manual';
 
@@ -48,32 +53,58 @@ export const useAutoSync = (config: AutoSyncConfig) => {
   const lastSyncedDataRef = useRef<string>('');
   const hasCheckedRemoteRef = useRef(false);
   const isInitializedRef = useRef(false);
-  
-  // Build sync payload
-  const buildPayload = useCallback((): SyncPayload => {
+
+  const getSyncSnapshot = useCallback(() => {
+    let effectivePFRules = config.portForwardingRules;
+    if (!effectivePFRules || effectivePFRules.length === 0) {
+      const stored = localStorageAdapter.read<SyncPayload['portForwardingRules']>(
+        STORAGE_KEY_PORT_FORWARDING,
+      );
+      if (stored && Array.isArray(stored) && stored.length > 0) {
+        effectivePFRules = stored.map((rule) => ({
+          ...rule,
+          status: 'inactive' as const,
+          error: undefined,
+          lastUsedAt: undefined,
+        }));
+      }
+    }
+
+    const effectiveKnownHosts = getEffectiveKnownHosts(config.knownHosts);
+
     return {
       hosts: config.hosts,
       keys: config.keys,
       identities: config.identities,
       snippets: config.snippets,
       customGroups: config.customGroups,
-      portForwardingRules: config.portForwardingRules,
-      knownHosts: config.knownHosts,
+      snippetPackages: config.snippetPackages,
+      portForwardingRules: effectivePFRules,
+      knownHosts: effectiveKnownHosts,
+    };
+  }, [
+    config.hosts,
+    config.keys,
+    config.identities,
+    config.snippets,
+    config.customGroups,
+    config.snippetPackages,
+    config.portForwardingRules,
+    config.knownHosts,
+  ]);
+
+  // Build sync payload
+  const buildPayload = useCallback((): SyncPayload => {
+    return {
+      ...getSyncSnapshot(),
       syncedAt: Date.now(),
     };
-  }, [config.hosts, config.keys, config.identities, config.snippets, config.customGroups, config.portForwardingRules, config.knownHosts]);
+  }, [getSyncSnapshot]);
   
   // Create a hash of current data for comparison
   const getDataHash = useCallback(() => {
-    const data = {
-      hosts: config.hosts,
-      keys: config.keys,
-      identities: config.identities,
-      snippets: config.snippets,
-      portForwardingRules: config.portForwardingRules,
-    };
-    return JSON.stringify(data);
-  }, [config.hosts, config.keys, config.identities, config.snippets, config.portForwardingRules]);
+    return JSON.stringify(getSyncSnapshot());
+  }, [getSyncSnapshot]);
   
   // Sync now handler - get fresh state directly from manager
   const syncNow = useCallback(async (options?: SyncNowOptions) => {
@@ -83,13 +114,17 @@ export const useAutoSync = (config: AutoSyncConfig) => {
       // Get fresh state directly from CloudSyncManager singleton
       let state = manager.getState();
 
-      const hasProvider = Object.values(state.providers).some(p => p.status === 'connected');
+      const hasProvider = Object.values(state.providers).some((provider) => isProviderReadyForSync(provider));
       const syncing = state.syncState === 'SYNCING';
 
       if (!hasProvider) {
         throw new Error(t('sync.autoSync.noProvider'));
       }
       if (syncing) {
+        if (trigger === 'auto') {
+          console.info('[AutoSync] Skipping overlapping auto-sync because another sync is already running.');
+          return;
+        }
         throw new Error(t('sync.autoSync.alreadySyncing'));
       }
 
@@ -111,6 +146,7 @@ export const useAutoSync = (config: AutoSyncConfig) => {
         throw new Error(t('sync.autoSync.vaultLocked'));
       }
 
+      const dataHash = getDataHash();
       const payload = buildPayload();
       const encryptedCredentialPaths = findSyncPayloadEncryptedCredentialPaths(payload);
       if (encryptedCredentialPaths.length > 0) {
@@ -129,7 +165,7 @@ export const useAutoSync = (config: AutoSyncConfig) => {
         }
       }
 
-      lastSyncedDataRef.current = getDataHash();
+      lastSyncedDataRef.current = dataHash;
     } catch (error) {
       if (trigger === 'manual') {
         throw error;
@@ -145,7 +181,7 @@ export const useAutoSync = (config: AutoSyncConfig) => {
   // Check remote version and pull if newer (on startup)
   const checkRemoteVersion = useCallback(async () => {
     const state = manager.getState();
-    const hasProvider = Object.values(state.providers).some(p => p.status === 'connected');
+    const hasProvider = Object.values(state.providers).some((provider) => isProviderReadyForSync(provider));
     const unlocked = state.securityState === 'UNLOCKED';
     
     if (!hasProvider || !unlocked || hasCheckedRemoteRef.current) {
@@ -155,12 +191,9 @@ export const useAutoSync = (config: AutoSyncConfig) => {
     hasCheckedRemoteRef.current = true;
     
     // Find connected provider
-    const connectedProvider = 
-      state.providers.github.status === 'connected' ? 'github' :
-      state.providers.google.status === 'connected' ? 'google' :
-      state.providers.onedrive.status === 'connected' ? 'onedrive' :
-      state.providers.webdav.status === 'connected' ? 'webdav' :
-      state.providers.s3.status === 'connected' ? 's3' : null;
+    const connectedProvider = AUTO_SYNC_PROVIDER_ORDER.find((provider) =>
+      isProviderReadyForSync(state.providers[provider]),
+    ) ?? null;
     
     if (!connectedProvider) return;
     
@@ -199,6 +232,12 @@ export const useAutoSync = (config: AutoSyncConfig) => {
     if (currentHash === lastSyncedDataRef.current) {
       return;
     }
+
+    // Wait for the current sync to finish, then this effect will re-run
+    // because sync.isSyncing changed.
+    if (sync.isSyncing) {
+      return;
+    }
     
     // Clear existing timeout
     if (syncTimeoutRef.current) {
@@ -216,7 +255,7 @@ export const useAutoSync = (config: AutoSyncConfig) => {
         clearTimeout(syncTimeoutRef.current);
       }
     };
-  }, [sync.hasAnyConnectedProvider, sync.autoSyncEnabled, sync.isUnlocked, getDataHash, syncNow]);
+  }, [sync.hasAnyConnectedProvider, sync.autoSyncEnabled, sync.isUnlocked, sync.isSyncing, getDataHash, syncNow]);
   
   // Check remote version on startup/unlock
   useEffect(() => {

application/state/useCloudSync.ts

@@ -21,6 +21,7 @@ import {
   type S3Config,
   formatLastSync,
   getSyncDotColor,
+  isProviderReadyForSync,
 } from '../../domain/sync';
 import {
   CloudSyncManager,
@@ -181,13 +182,13 @@ export const useCloudSync = (): CloudSyncHook => {
   
   const hasAnyConnectedProvider = useMemo(() => {
     return (Object.values(state.providers) as ProviderConnection[]).some(
-      (p) => p.status === 'connected' || p.status === 'syncing'
+      (p) => isProviderReadyForSync(p)
     );
   }, [state.providers]);
   
   const connectedProviderCount = useMemo(() => {
     return (Object.values(state.providers) as ProviderConnection[]).filter(
-      (p) => p.status === 'connected' || p.status === 'syncing'
+      (p) => isProviderReadyForSync(p)
     ).length;
   }, [state.providers]);
   
@@ -519,7 +520,7 @@ export const useProviderStatus = (provider: CloudProvider) => {
   
   return {
     ...connection,
-    isConnected: connection.status === 'connected',
+    isConnected: isProviderReadyForSync(connection),
     isSyncing: connection.status === 'syncing',
     hasError: connection.status === 'error',
     dotColor: getSyncDotColor(connection.status),

application/state/useGlobalHotkeys.ts

@@ -135,8 +135,6 @@ export const useGlobalHotkeys = ({
     e.stopPropagation();
 
     const currentActions = actionsRef.current;
-    const _tabs = orderedTabsRef.current;
-
     switch (action) {
       case 'switchToTab': {
         const num = parseInt(e.key, 10);

application/state/usePortForwardingAutoStart.ts

@@ -17,7 +17,7 @@ import { logger } from "../../lib/logger";
 
 export interface UsePortForwardingAutoStartOptions {
   hosts: Host[];
-  keys: { id: string; privateKey: string }[];
+  keys: { id: string; privateKey: string; passphrase: string }[];
 }
 
 /**
@@ -30,7 +30,7 @@ export const usePortForwardingAutoStart = ({
 }: UsePortForwardingAutoStartOptions): void => {
   const autoStartExecutedRef = useRef(false);
   const hostsRef = useRef<Host[]>(hosts);
-  const keysRef = useRef<{ id: string; privateKey: string }[]>(keys);
+  const keysRef = useRef<{ id: string; privateKey: string; passphrase: string }[]>(keys);
 
   // Keep refs in sync
   useEffect(() => {

application/state/usePortForwardingState.ts

@@ -9,12 +9,25 @@ import { localStorageAdapter } from "../../infrastructure/persistence/localStora
 import {
   clearReconnectTimer,
   getActiveConnection,
+  initReconnectCancelListener,
+  reconcileWithBackend,
   startPortForward,
+  stopAllPortForwards,
+  stopAndCleanupRule,
   stopPortForward,
   syncWithBackend,
 } from "../../infrastructure/services/portForwardingService";
 import { useStoredViewMode, ViewMode } from "./useStoredViewMode";
 
+// Module-level ref-counts: these side effects must run at most once per
+// window, not per hook instance (the hook mounts from both App.tsx
+// and PortForwardingNew.tsx).  Ref-counting ensures the resources
+// stay alive as long as ANY instance is mounted.
+let reconnectCancelListenerRefs = 0;
+let reconnectCancelCleanup: (() => void) | undefined;
+let heartbeatRefs = 0;
+let heartbeatIntervalId: ReturnType<typeof setInterval> | undefined;
+
 export type { ViewMode };
 
 export type SortMode = "az" | "za" | "newest" | "oldest";
@@ -50,7 +63,7 @@ export interface UsePortForwardingStateResult {
   startTunnel: (
     rule: PortForwardingRule,
     host: Host,
-    keys: { id: string; privateKey: string }[],
+    keys: { id: string; privateKey: string; passphrase: string }[],
     onStatusChange?: (status: PortForwardingRule["status"], error?: string) => void,
     enableReconnect?: boolean,
   ) => Promise<{ success: boolean; error?: string }>;
@@ -177,6 +190,53 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
     return () => window.removeEventListener("storage", handleStorageChange);
   }, []);
 
+  // Listen for cross-window reconnect cancellation events.
+  // Ref-counted so the listener stays alive as long as ANY hook
+  // instance is mounted (App.tsx outlives PortForwardingNew.tsx).
+  useEffect(() => {
+    reconnectCancelListenerRefs++;
+    let cleanup: (() => void) | undefined;
+    if (reconnectCancelListenerRefs === 1) {
+      cleanup = initReconnectCancelListener();
+      reconnectCancelCleanup = cleanup;
+    }
+    return () => {
+      reconnectCancelListenerRefs--;
+      if (reconnectCancelListenerRefs === 0 && reconnectCancelCleanup) {
+        reconnectCancelCleanup();
+        reconnectCancelCleanup = undefined;
+      }
+    };
+  }, []);
+
+  // Periodic heartbeat: reconcile renderer state with the backend every 4s.
+  // Ref-counted — same pattern as the reconnect cancel listener.
+  useEffect(() => {
+    heartbeatRefs++;
+    let intervalId: ReturnType<typeof setInterval> | undefined;
+    if (heartbeatRefs === 1) {
+      const HEARTBEAT_INTERVAL_MS = 4_000;
+
+      const tick = async () => {
+        const { gone, appeared } = await reconcileWithBackend();
+        if (gone.length === 0 && appeared.length === 0) return;
+
+        // Re-derive statuses from the now-updated activeConnections map
+        setGlobalRules(normalizeRulesWithConnections(globalRules));
+      };
+
+      intervalId = setInterval(tick, HEARTBEAT_INTERVAL_MS);
+      heartbeatIntervalId = intervalId;
+    }
+    return () => {
+      heartbeatRefs--;
+      if (heartbeatRefs === 0 && heartbeatIntervalId !== undefined) {
+        clearInterval(heartbeatIntervalId);
+        heartbeatIntervalId = undefined;
+      }
+    };
+  }, []);
+
   const addRule = useCallback(
     (
       rule: Omit<PortForwardingRule, "id" | "createdAt" | "status">,
@@ -207,6 +267,8 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
 
   const deleteRule = useCallback(
     (id: string) => {
+      // Stop any active tunnel before removing the rule
+      stopAndCleanupRule(id);
       const updated = globalRules.filter((r) => r.id !== id);
       setGlobalRules(updated);
       if (selectedRuleId === id) {
@@ -238,6 +300,60 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
   );
 
   const importRules = useCallback((newRules: PortForwardingRule[]) => {
+    // When clearing all rules (e.g. "Clear local data"), stop ALL tunnels
+    // and broadcast per-rule reconnect cancellation.  stopAllPortForwards
+    // handles the backend, but we also need per-rule broadcasts so other
+    // windows cancel their pending reconnect timers.
+    if (newRules.length === 0) {
+      // Read from localStorage since globalRules may be empty (uninitialized)
+      const storedRules = localStorageAdapter.read<PortForwardingRule[]>(
+        STORAGE_KEY_PORT_FORWARDING,
+      );
+      const rulesToCancel = globalRules.length > 0
+        ? globalRules
+        : (storedRules && Array.isArray(storedRules) ? storedRules : []);
+      for (const rule of rulesToCancel) {
+        stopAndCleanupRule(rule.id);
+      }
+      // Safety net: also stop anything the renderer doesn't know about
+      void stopAllPortForwards();
+    }
+
+    // Stop tunnels for rules that are being removed or whose connection
+    // config has changed (same ID but different host/port/type means the
+    // old tunnel is pointing at stale parameters and must be torn down).
+    //
+    // Use globalRules as the diff baseline.  In a freshly opened settings
+    // window, globalRules may still be empty because initializeStore is
+    // async.  Fall back to reading directly from localStorage to avoid
+    // missing tunnels that need to be stopped.
+    let diffBaseline = globalRules;
+    if (diffBaseline.length === 0 && newRules.length > 0) {
+      const stored = localStorageAdapter.read<PortForwardingRule[]>(
+        STORAGE_KEY_PORT_FORWARDING,
+      );
+      if (stored && Array.isArray(stored) && stored.length > 0) {
+        diffBaseline = stored;
+      }
+    }
+    const newRulesById = new Map(newRules.map((r) => [r.id, r]));
+    for (const existing of diffBaseline) {
+      const incoming = newRulesById.get(existing.id);
+      if (!incoming) {
+        // Rule removed entirely
+        stopAndCleanupRule(existing.id);
+      } else if (
+        existing.type !== incoming.type ||
+        existing.localPort !== incoming.localPort ||
+        existing.remoteHost !== incoming.remoteHost ||
+        existing.remotePort !== incoming.remotePort ||
+        existing.bindAddress !== incoming.bindAddress ||
+        existing.hostId !== incoming.hostId
+      ) {
+        // Connection-relevant config changed — tear down the old tunnel
+        stopAndCleanupRule(existing.id);
+      }
+    }
     setGlobalRules(normalizeRulesWithConnections(newRules));
   }, []);
 
@@ -261,7 +377,7 @@ export const usePortForwardingState = (): UsePortForwardingStateResult => {
     async (
       rule: PortForwardingRule,
       host: Host,
-      keys: { id: string; privateKey: string }[],
+      keys: { id: string; privateKey: string; passphrase: string }[],
       onStatusChange?: (
         status: PortForwardingRule["status"],
         error?: string,

application/state/useSettingsState.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type SetStateAction } from 'react';
-import { SyncConfig, TerminalSettings, DEFAULT_TERMINAL_SETTINGS, HotkeyScheme, CustomKeyBindings, DEFAULT_KEY_BINDINGS, KeyBinding, UILanguage, SessionLogFormat } from '../../domain/models';
+import { SyncConfig, TerminalSettings, HotkeyScheme, CustomKeyBindings, DEFAULT_KEY_BINDINGS, KeyBinding, UILanguage, SessionLogFormat, normalizeTerminalSettings } from '../../domain/models';
 import {
   STORAGE_KEY_COLOR,
   STORAGE_KEY_SYNC,
@@ -39,7 +39,13 @@ import { useAvailableFonts } from './fontStore';
 import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
 import { netcattyBridge } from '../../infrastructure/services/netcattyBridge';
 
-const DEFAULT_THEME: 'light' | 'dark' = 'light';
+const DEFAULT_THEME: 'light' | 'dark' | 'system' = 'dark';
+
+/** Resolve the current OS color scheme preference. */
+const getSystemPreference = (): 'light' | 'dark' =>
+  typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light';
 const DEFAULT_LIGHT_UI_THEME = 'snow';
 const DEFAULT_DARK_UI_THEME = 'midnight';
 const DEFAULT_ACCENT_MODE: 'theme' | 'custom' = 'theme';
@@ -77,7 +83,7 @@ const readStoredString = (key: string): string | null => {
   }
 };
 
-const isValidTheme = (value: unknown): value is 'light' | 'dark' => value === 'light' || value === 'dark';
+const isValidTheme = (value: unknown): value is 'light' | 'dark' | 'system' => value === 'light' || value === 'dark' || value === 'system';
 
 const isValidHslToken = (value: string): boolean => {
   // Expect: "<h> <s>% <l>%", e.g. "221.2 83.2% 53.3%"
@@ -104,14 +110,15 @@ const areTerminalSettingsEqual = (a: TerminalSettings, b: TerminalSettings): boo
   serializeTerminalSettings(a) === serializeTerminalSettings(b);
 
 const applyThemeTokens = (
-  theme: 'light' | 'dark',
+  themeSource: 'light' | 'dark' | 'system',
+  resolvedTheme: 'light' | 'dark',
   tokens: UiThemeTokens,
   accentMode: 'theme' | 'custom',
   accentOverride: string,
 ) => {
   const root = window.document.documentElement;
   root.classList.remove('light', 'dark');
-  root.classList.add(theme);
+  root.classList.add(resolvedTheme);
   root.style.setProperty('--background', tokens.background);
   root.style.setProperty('--foreground', tokens.foreground);
   root.style.setProperty('--card', tokens.card);
@@ -120,7 +127,7 @@ const applyThemeTokens = (
   root.style.setProperty('--popover-foreground', tokens.popoverForeground);
   const accentToken = accentMode === 'custom' ? accentOverride : tokens.accent;
   const accentLightness = parseFloat(accentToken.split(/\s+/)[2]?.replace('%', '') || '');
-  const computedAccentForeground = theme === 'dark'
+  const computedAccentForeground = resolvedTheme === 'dark'
     ? '220 40% 96%'
     : (!Number.isNaN(accentLightness) && accentLightness < 55 ? '0 0% 98%' : '222 47% 12%');
 
@@ -139,17 +146,21 @@ const applyThemeTokens = (
   root.style.setProperty('--ring', accentToken);
 
   // Sync with native window title bar (Electron)
-  netcattyBridge.get()?.setTheme?.(theme);
+  netcattyBridge.get()?.setTheme?.(themeSource);
   netcattyBridge.get()?.setBackgroundColor?.(tokens.background);
 };
 
 export const useSettingsState = () => {
   const availableFonts = useAvailableFonts();
   const uiFontsLoaded = useUIFontsLoaded();
-  const [theme, setTheme] = useState<'dark' | 'light'>(() => {
+  const [theme, setTheme] = useState<'dark' | 'light' | 'system'>(() => {
     const stored = readStoredString(STORAGE_KEY_THEME);
     return stored && isValidTheme(stored) ? stored : DEFAULT_THEME;
   });
+  // Track the OS color scheme preference (updated by matchMedia listener)
+  const [systemPreference, setSystemPreference] = useState<'light' | 'dark'>(getSystemPreference);
+  // resolvedTheme is always 'light' or 'dark' — derived synchronously from theme + OS preference
+  const resolvedTheme: 'light' | 'dark' = theme === 'system' ? systemPreference : theme;
   const [lightUiThemeId, setLightUiThemeId] = useState<string>(() => {
     const stored = readStoredString(STORAGE_KEY_UI_THEME_LIGHT);
     return stored && isValidUiThemeId('light', stored) ? stored : DEFAULT_LIGHT_UI_THEME;
@@ -182,7 +193,7 @@ export const useSettingsState = () => {
   });
   const [terminalSettings, setTerminalSettingsState] = useState<TerminalSettings>(() => {
     const stored = localStorageAdapter.read<TerminalSettings>(STORAGE_KEY_TERM_SETTINGS);
-    return stored ? { ...DEFAULT_TERMINAL_SETTINGS, ...stored } : DEFAULT_TERMINAL_SETTINGS;
+    return normalizeTerminalSettings(stored);
   });
   const [hotkeyScheme, setHotkeyScheme] = useState<HotkeyScheme>(() => {
     const stored = localStorageAdapter.readString(STORAGE_KEY_HOTKEY_SCHEME);
@@ -260,9 +271,10 @@ export const useSettingsState = () => {
 
   const setTerminalSettings = useCallback((nextValue: SetStateAction<TerminalSettings>) => {
     setTerminalSettingsState((prev) => {
-      const next = typeof nextValue === 'function'
+      const candidate = typeof nextValue === 'function'
         ? (nextValue as (prevState: TerminalSettings) => TerminalSettings)(prev)
         : nextValue;
+      const next = normalizeTerminalSettings(candidate);
       if (areTerminalSettingsEqual(prev, next)) {
         return prev;
       }
@@ -273,7 +285,7 @@ export const useSettingsState = () => {
 
   const mergeIncomingTerminalSettings = useCallback((incoming: Partial<TerminalSettings>) => {
     setTerminalSettingsState((prev) => {
-      const next = { ...prev, ...incoming };
+      const next = normalizeTerminalSettings({ ...prev, ...incoming });
       if (areTerminalSettingsEqual(prev, next)) {
         return prev;
       }
@@ -310,8 +322,9 @@ export const useSettingsState = () => {
     setAccentMode(nextAccentMode);
     setCustomAccent(nextAccent);
 
-    const tokens = getUiThemeById(nextTheme, nextTheme === 'dark' ? nextDarkId : nextLightId).tokens;
-    applyThemeTokens(nextTheme, tokens, nextAccentMode, nextAccent);
+    const effective = nextTheme === 'system' ? getSystemPreference() : nextTheme;
+    const tokens = getUiThemeById(effective, effective === 'dark' ? nextDarkId : nextLightId).tokens;
+    applyThemeTokens(nextTheme, effective, tokens, nextAccentMode, nextAccent);
   }, [theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent]);
 
   const syncCustomCssFromStorage = useCallback(() => {
@@ -320,8 +333,8 @@ export const useSettingsState = () => {
   }, []);
 
   useLayoutEffect(() => {
-    const tokens = getUiThemeById(theme, theme === 'dark' ? darkUiThemeId : lightUiThemeId).tokens;
-    applyThemeTokens(theme, tokens, accentMode, customAccent);
+    const tokens = getUiThemeById(resolvedTheme, resolvedTheme === 'dark' ? darkUiThemeId : lightUiThemeId).tokens;
+    applyThemeTokens(theme, resolvedTheme, tokens, accentMode, customAccent);
     localStorageAdapter.writeString(STORAGE_KEY_THEME, theme);
     localStorageAdapter.writeString(STORAGE_KEY_UI_THEME_LIGHT, lightUiThemeId);
     localStorageAdapter.writeString(STORAGE_KEY_UI_THEME_DARK, darkUiThemeId);
@@ -333,7 +346,18 @@ export const useSettingsState = () => {
     notifySettingsChanged(STORAGE_KEY_UI_THEME_DARK, darkUiThemeId);
     notifySettingsChanged(STORAGE_KEY_ACCENT_MODE, accentMode);
     notifySettingsChanged(STORAGE_KEY_COLOR, customAccent);
-  }, [theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent, notifySettingsChanged]);
+  }, [theme, resolvedTheme, lightUiThemeId, darkUiThemeId, accentMode, customAccent, notifySettingsChanged]);
+
+  // Listen for OS color scheme changes to keep systemPreference in sync
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = (e: MediaQueryListEvent) => {
+      setSystemPreference(e.matches ? 'dark' : 'light');
+    };
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
+  }, []);
 
   useLayoutEffect(() => {
     localStorageAdapter.writeString(STORAGE_KEY_UI_LANGUAGE, uiLanguage);
@@ -522,7 +546,7 @@ export const useSettingsState = () => {
       if (e.key === STORAGE_KEY_TERM_SETTINGS && e.newValue) {
         try {
           const newSettings = JSON.parse(e.newValue) as TerminalSettings;
-          mergeIncomingTerminalSettings({ ...DEFAULT_TERMINAL_SETTINGS, ...newSettings });
+          mergeIncomingTerminalSettings(newSettings);
         } catch {
           // ignore parse errors
         }
@@ -823,6 +847,7 @@ export const useSettingsState = () => {
   return {
     theme,
     setTheme,
+    resolvedTheme,
     lightUiThemeId,
     setLightUiThemeId,
     darkUiThemeId,

application/state/useSftpFileOperations.ts

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

application/state/useSftpState.ts

@@ -36,7 +36,15 @@ export const useSftpState = (
   identities: Identity[],
   options?: SftpStateOptions
 ) => {
-  const tabsState = useSftpTabsState();
+  const createPane = useCallback(
+    (id?: string, showHiddenFiles = options?.defaultShowHiddenFiles ?? false) =>
+      createEmptyPane(id, showHiddenFiles),
+    [options?.defaultShowHiddenFiles],
+  );
+
+  const tabsState = useSftpTabsState({
+    defaultShowHiddenFiles: options?.defaultShowHiddenFiles,
+  });
   const {
     leftTabs,
     rightTabs,
@@ -49,6 +57,7 @@ export const useSftpState = (
     getActivePane,
     updateTab,
     updateActiveTab,
+    setTabShowHiddenFiles,
     addTab,
     closeTab,
     selectTab,
@@ -92,12 +101,26 @@ export const useSftpState = (
     }
   }, []);
 
+  const clearDirCacheEntry = useCallback((connectionId: string, path: string) => {
+    // Remove all encoding variants of this path from the cache
+    for (const key of dirCacheRef.current.keys()) {
+      if (key.startsWith(`${connectionId}::`) && key.endsWith(`::${path}`)) {
+        dirCacheRef.current.delete(key);
+      }
+    }
+  }, []);
+
   // Ref to track pending reconnections to avoid multiple reconnect attempts
   const reconnectingRef = useRef<{ left: boolean; right: boolean }>({
     left: false,
     right: false,
   });
 
+  // Map connectionId → cache key, set at connect time so each tab's
+  // navigateTo can use the correct cache key even when multiple tabs
+  // share the same hostId with different session-time overrides.
+  const connectionCacheKeyMapRef = useRef<Map<string, string>>(new Map());
+
   // Store last connected host info for reconnection
   const lastConnectedHostRef = useRef<{
     left: Host | "local" | null;
@@ -140,10 +163,12 @@ export const useSftpState = (
     dirCacheRef,
     sftpSessionsRef,
     lastConnectedHostRef,
+    connectionCacheKeyMapRef,
     reconnectingRef,
     makeCacheKey,
     clearCacheForConnection,
-    createEmptyPane,
+    createEmptyPane: createPane,
+    autoConnectLocalOnMount: options?.autoConnectLocalOnMount,
   });
 
   const {
@@ -164,6 +189,7 @@ export const useSftpState = (
     renameFile,
     changePermissions,
   } = useSftpPaneActions({
+    hosts,
     getActivePane,
     updateTab,
     updateActiveTab,
@@ -173,6 +199,7 @@ export const useSftpState = (
     dirCacheRef,
     sftpSessionsRef,
     lastConnectedHostRef,
+    connectionCacheKeyMapRef,
     reconnectingRef,
     makeCacheKey,
     clearCacheForConnection,
@@ -205,6 +232,13 @@ export const useSftpState = (
     [clearCacheForConnection, getActivePane, navigateTo, updateActiveTab],
   );
 
+  const setShowHiddenFiles = useCallback(
+    (side: "left" | "right", tabId: string, showHiddenFiles: boolean) => {
+      setTabShowHiddenFiles(side, tabId, showHiddenFiles);
+    },
+    [setTabShowHiddenFiles],
+  );
+
   const {
     transfers,
     conflicts,
@@ -233,12 +267,16 @@ export const useSftpState = (
     writeTextFile,
     downloadToTempAndOpen,
     uploadExternalFiles,
+    uploadExternalEntries,
     cancelExternalUpload,
     selectApplication,
+    activeFileWatchCountRef,
   } = useSftpExternalOperations({
     getActivePane,
     refresh,
     sftpSessionsRef,
+    connectionCacheKeyMapRef,
+    clearDirCacheEntry,
     useCompressedUpload: options?.useCompressedUpload,
     addExternalUpload,
     updateExternalUpload,
@@ -270,6 +308,7 @@ export const useSftpState = (
     selectAll,
     setFilter,
     setFilenameEncoding,
+    setShowHiddenFiles,
     createDirectory,
     createFile,
     deleteFiles,
@@ -281,6 +320,7 @@ export const useSftpState = (
     writeTextFile,
     downloadToTempAndOpen,
     uploadExternalFiles,
+    uploadExternalEntries,
     cancelExternalUpload,
     selectApplication,
     startTransfer,
@@ -315,6 +355,7 @@ export const useSftpState = (
     selectAll,
     setFilter,
     setFilenameEncoding,
+    setShowHiddenFiles,
     createDirectory,
     createFile,
     deleteFiles,
@@ -326,6 +367,7 @@ export const useSftpState = (
     writeTextFile,
     downloadToTempAndOpen,
     uploadExternalFiles,
+    uploadExternalEntries,
     cancelExternalUpload,
     selectApplication,
     startTransfer,
@@ -364,6 +406,8 @@ export const useSftpState = (
     setFilter: (...args: Parameters<typeof setFilter>) => methodsRef.current.setFilter(...args),
     setFilenameEncoding: (...args: Parameters<typeof setFilenameEncoding>) =>
       methodsRef.current.setFilenameEncoding(...args),
+    setShowHiddenFiles: (...args: Parameters<typeof setShowHiddenFiles>) =>
+      methodsRef.current.setShowHiddenFiles(...args),
     createDirectory: (...args: Parameters<typeof createDirectory>) => methodsRef.current.createDirectory(...args),
     createFile: (...args: Parameters<typeof createFile>) => methodsRef.current.createFile(...args),
     deleteFiles: (...args: Parameters<typeof deleteFiles>) => methodsRef.current.deleteFiles(...args),
@@ -376,6 +420,8 @@ export const useSftpState = (
     writeTextFile: (...args: Parameters<typeof writeTextFile>) => methodsRef.current.writeTextFile(...args),
     downloadToTempAndOpen: (...args: Parameters<typeof downloadToTempAndOpen>) => methodsRef.current.downloadToTempAndOpen(...args),
     uploadExternalFiles: (...args: Parameters<typeof uploadExternalFiles>) => methodsRef.current.uploadExternalFiles(...args),
+    uploadExternalEntries: (...args: Parameters<typeof uploadExternalEntries>) =>
+      methodsRef.current.uploadExternalEntries(...args),
     cancelExternalUpload: () => methodsRef.current.cancelExternalUpload(),
     selectApplication: () => methodsRef.current.selectApplication(),
     startTransfer: (...args: Parameters<typeof startTransfer>) => methodsRef.current.startTransfer(...args),
@@ -387,7 +433,8 @@ export const useSftpState = (
     dismissTransfer: (...args: Parameters<typeof dismissTransfer>) => methodsRef.current.dismissTransfer(...args),
     resolveConflict: (...args: Parameters<typeof resolveConflict>) => methodsRef.current.resolveConflict(...args),
     getSftpIdForConnection: (...args: Parameters<typeof getSftpIdForConnection>) => methodsRef.current.getSftpIdForConnection(...args),
-  }), []); // Empty deps - these wrappers never change
+    activeFileWatchCountRef,
+  }), [activeFileWatchCountRef]); // activeFileWatchCountRef is a stable ref
 
   // Return object with stable method references but reactive state
   // State changes will cause re-renders, but method references stay stable

application/state/useStoredString.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
+
+/**
+ * Hook for persisting a string value to localStorage.
+ * @param storageKey - The key to use for localStorage
+ * @param fallback - The default value if no stored value exists
+ * @param validate - Optional function to validate stored value; returns fallback if invalid
+ * @returns A tuple of [value, setValue] similar to useState
+ */
+export const useStoredString = <T extends string = string>(
+    storageKey: string,
+    fallback: T,
+    validate?: (value: string) => value is T,
+) => {
+    const [value, setValue] = useState<T>(() => {
+        const stored = localStorageAdapter.readString(storageKey);
+        if (stored === null) return fallback;
+        if (validate) return validate(stored) ? stored : fallback;
+        return stored as T;
+    });
+
+    useEffect(() => {
+        localStorageAdapter.writeString(storageKey, value);
+    }, [storageKey, value]);
+
+    return [value, setValue] as const;
+};

application/state/useSyncState.ts

@@ -1,68 +0,0 @@
-import { useCallback, useState } from "react";
-import { loadFromGist, syncToGist } from "../../infrastructure/services/syncService";
-
-export type SyncStatus = "idle" | "success" | "error";
-
-export const useSyncState = () => {
-  const [isSyncing, setIsSyncing] = useState(false);
-  const [syncStatus, setSyncStatus] = useState<SyncStatus>("idle");
-
-  const resetSyncStatus = useCallback(() => {
-    setSyncStatus("idle");
-  }, []);
-
-  const verify = useCallback(async (token: string, gistId?: string) => {
-    setIsSyncing(true);
-    setSyncStatus("idle");
-    try {
-      if (gistId) {
-        await loadFromGist(token, gistId);
-      }
-      setSyncStatus("success");
-    } catch (err) {
-      setSyncStatus("error");
-      throw err;
-    } finally {
-      setIsSyncing(false);
-    }
-  }, []);
-
-  const upload = useCallback(
-    async (
-      token: string,
-      gistId: string | undefined,
-      data: Parameters<typeof syncToGist>[2],
-    ) => {
-      setIsSyncing(true);
-      setSyncStatus("idle");
-      try {
-        const newGistId = await syncToGist(token, gistId, data);
-        setSyncStatus("success");
-        return newGistId;
-      } catch (err) {
-        setSyncStatus("error");
-        throw err;
-      } finally {
-        setIsSyncing(false);
-      }
-    },
-    [],
-  );
-
-  const download = useCallback(async (token: string, gistId: string) => {
-    setIsSyncing(true);
-    setSyncStatus("idle");
-    try {
-      const data = await loadFromGist(token, gistId);
-      setSyncStatus("success");
-      return data;
-    } catch (err) {
-      setSyncStatus("error");
-      throw err;
-    } finally {
-      setIsSyncing(false);
-    }
-  }, []);
-
-  return { isSyncing, syncStatus, resetSyncStatus, verify, upload, download };
-};

application/state/useUpdateCheck.ts

@@ -1,13 +1,17 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { checkForUpdates, getReleaseUrl, type ReleaseInfo, type UpdateCheckResult } from '../../infrastructure/services/updateService';
 import { localStorageAdapter } from '../../infrastructure/persistence/localStorageAdapter';
-import { STORAGE_KEY_UPDATE_DISMISSED_VERSION, STORAGE_KEY_UPDATE_LAST_CHECK } from '../../infrastructure/config/storageKeys';
+import { STORAGE_KEY_UPDATE_DISMISSED_VERSION, STORAGE_KEY_UPDATE_LAST_CHECK, STORAGE_KEY_UPDATE_LATEST_RELEASE } from '../../infrastructure/config/storageKeys';
 import { netcattyBridge } from '../../infrastructure/services/netcattyBridge';
 
 // Check for updates at most once per hour
 const UPDATE_CHECK_INTERVAL_MS = 60 * 60 * 1000;
-// Delay startup check to avoid slowing down app launch
-const STARTUP_CHECK_DELAY_MS = 5000;
+// Delay startup check to avoid slowing down app launch.
+// 8s gives electron-updater's startAutoCheck(5000) time to emit
+// 'update-available' first.  The `onUpdateAvailable` handler also cancels
+// any pending startup timeout, so even on slow networks where the event
+// arrives after 8s the duplicate check is avoided.
+const STARTUP_CHECK_DELAY_MS = 8000;
 // Enable demo mode for development (set via localStorage: localStorage.setItem('debug.updateDemo', '1'))
 const IS_UPDATE_DEMO_MODE = typeof window !== 'undefined' && 
   window.localStorage?.getItem('debug.updateDemo') === '1';
@@ -19,6 +23,10 @@ const debugLog = (...args: unknown[]) => {
   }
 };
 
+export type AutoDownloadStatus = 'idle' | 'downloading' | 'ready' | 'error';
+
+export type ManualCheckStatus = 'idle' | 'checking' | 'available' | 'up-to-date' | 'error';
+
 export interface UpdateState {
   isChecking: boolean;
   hasUpdate: boolean;
@@ -26,6 +34,12 @@ export interface UpdateState {
   latestRelease: ReleaseInfo | null;
   error: string | null;
   lastCheckedAt: number | null;
+  // Auto-download state — driven by electron-updater IPC events
+  autoDownloadStatus: AutoDownloadStatus;
+  downloadPercent: number;
+  downloadError: string | null;
+  /** Manual check state — driven by user clicking "Check for Updates" */
+  manualCheckStatus: ManualCheckStatus;
 }
 
 export interface UseUpdateCheckResult {
@@ -33,6 +47,7 @@ export interface UseUpdateCheckResult {
   checkNow: () => Promise<UpdateCheckResult | null>;
   dismissUpdate: () => void;
   openReleasePage: () => void;
+  installUpdate: () => void;
 }
 
 /**
@@ -49,11 +64,44 @@ export function useUpdateCheck(): UseUpdateCheckResult {
     latestRelease: null,
     error: null,
     lastCheckedAt: null,
+    autoDownloadStatus: 'idle',
+    downloadPercent: 0,
+    downloadError: null,
+    manualCheckStatus: 'idle',
   });
 
   const hasCheckedOnStartupRef = useRef(false);
   const isCheckingRef = useRef(false);
   const startupCheckTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Track current version in a ref to avoid stale closure in checkNow
+  const currentVersionRef = useRef(updateState.currentVersion);
+  // Track autoDownloadStatus in a ref so checkNow always reads the latest value
+  const autoDownloadStatusRef = useRef<AutoDownloadStatus>('idle');
+  // Timer ref for auto-resetting manualCheckStatus='up-to-date' back to 'idle'
+  const manualCheckResetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Flag: true when we suppressed auto-download because the version was dismissed.
+  // Used to distinguish "idle because dismissed" from "idle because not hydrated yet"
+  // in the progress/downloaded/error callbacks.
+  const dismissedAutoDownloadRef = useRef(false);
+
+  // Keep currentVersionRef in sync so checkNow always reads the latest version
+  useEffect(() => {
+    currentVersionRef.current = updateState.currentVersion;
+  }, [updateState.currentVersion]);
+
+  // Keep autoDownloadStatusRef in sync so checkNow always reads the latest download state
+  useEffect(() => {
+    autoDownloadStatusRef.current = updateState.autoDownloadStatus;
+  }, [updateState.autoDownloadStatus]);
+
+  // Cleanup: clear any pending manualCheckStatus reset timer on unmount
+  useEffect(() => {
+    return () => {
+      if (manualCheckResetTimeoutRef.current) {
+        clearTimeout(manualCheckResetTimeoutRef.current);
+      }
+    };
+  }, []);
 
   // Get current app version
   useEffect(() => {
@@ -71,6 +119,136 @@ export function useUpdateCheck(): UseUpdateCheckResult {
     void loadVersion();
   }, []);
 
+  // Hydrate auto-download status from the main process so windows opened
+  // after the download started (e.g. Settings) immediately reflect the
+  // current state instead of showing stale 'idle'.
+  useEffect(() => {
+    const bridge = netcattyBridge.get();
+    void bridge?.getUpdateStatus?.().then((snapshot) => {
+      if (!snapshot || snapshot.status === 'idle') return;
+
+      // Respect dismissed versions: if the user dismissed this release,
+      // don't surface download progress/ready state in late-opening windows.
+      // Also set the dismissed ref so subsequent IPC events are suppressed.
+      const dismissedVersion = localStorageAdapter.readString(STORAGE_KEY_UPDATE_DISMISSED_VERSION);
+      if (snapshot.version && snapshot.version === dismissedVersion) {
+        dismissedAutoDownloadRef.current = true;
+        return;
+      }
+
+      setUpdateState((prev) => {
+        // Don't overwrite if the renderer already has a newer state
+        if (prev.autoDownloadStatus !== 'idle') return prev;
+        return {
+          ...prev,
+          autoDownloadStatus: snapshot.status,
+          downloadPercent: snapshot.percent,
+          downloadError: snapshot.error,
+          // Use snapshot version if no release data or if versions differ
+          latestRelease: (!prev.latestRelease || (snapshot.version && prev.latestRelease.version !== snapshot.version)) ? (snapshot.version ? {
+            version: snapshot.version,
+            tagName: `v${snapshot.version}`,
+            name: `v${snapshot.version}`,
+            body: '',
+            htmlUrl: '',
+            publishedAt: new Date().toISOString(),
+            assets: [],
+          } : prev.latestRelease) : prev.latestRelease,
+        };
+      });
+    });
+  }, []);
+
+  // Subscribe to electron-updater auto-download IPC events.
+  // These fire automatically when autoDownload=true in the main process.
+  useEffect(() => {
+    const bridge = netcattyBridge.get();
+
+    // When electron-updater confirms no update in its feed, don't write
+    // STORAGE_KEY_UPDATE_LAST_CHECK — that would throttle the GitHub API
+    // fallback for an hour.  Let performCheck write it on success so the
+    // GitHub check can still discover releases not yet in the updater feed.
+    const cleanupNotAvailable = bridge?.onUpdateNotAvailable?.(() => {
+      // No-op for now — the GitHub fallback will handle lastCheckedAt.
+    });
+
+    const cleanupAvailable = bridge?.onUpdateAvailable?.((info) => {
+      // Cancel any pending startup GitHub API check — electron-updater is
+      // now authoritative and we don't want a duplicate toast.
+      if (startupCheckTimeoutRef.current) {
+        clearTimeout(startupCheckTimeoutRef.current);
+        startupCheckTimeoutRef.current = null;
+      }
+
+      // Check if this version was dismissed by the user
+      const dismissedVersion = localStorageAdapter.readString(STORAGE_KEY_UPDATE_DISMISSED_VERSION);
+      const isDismissed = dismissedVersion === info.version;
+      if (isDismissed) {
+        dismissedAutoDownloadRef.current = true;
+      }
+      setUpdateState((prev) => ({
+        ...prev,
+        hasUpdate: !isDismissed,
+        // Only transition to 'downloading' if the user hasn't dismissed this
+        // version — otherwise leave the status at 'idle' so no download
+        // progress/ready toast appears for a release they don't want.
+        autoDownloadStatus: isDismissed ? prev.autoDownloadStatus : 'downloading',
+        downloadPercent: isDismissed ? prev.downloadPercent : 0,
+        downloadError: isDismissed ? prev.downloadError : null,
+        // Use electron-updater's version if GitHub API hasn't resolved yet or
+        // if the updater reports a different version than the cached release.
+        latestRelease: (!prev.latestRelease || prev.latestRelease.version !== info.version) ? {
+          version: info.version,
+          tagName: `v${info.version}`,
+          name: `v${info.version}`,
+          body: info.releaseNotes || '',
+          htmlUrl: '',
+          publishedAt: info.releaseDate || new Date().toISOString(),
+          assets: [],
+        } : prev.latestRelease,
+      }));
+    });
+
+    const cleanupProgress = bridge?.onUpdateDownloadProgress?.((p) => {
+      // If we suppressed the download for a dismissed version, ignore progress.
+      if (dismissedAutoDownloadRef.current) return;
+      setUpdateState((prev) => ({
+        ...prev,
+        autoDownloadStatus: 'downloading',
+        downloadPercent: Math.round(p.percent),
+      }));
+    });
+
+    const cleanupDownloaded = bridge?.onUpdateDownloaded?.(() => {
+      // If the download was for a dismissed version, don't transition to
+      // 'ready' — that would trigger the "Update ready" toast.
+      if (dismissedAutoDownloadRef.current) return;
+      setUpdateState((prev) => ({
+        ...prev,
+        autoDownloadStatus: 'ready',
+        downloadPercent: 100,
+      }));
+    });
+
+    const cleanupError = bridge?.onUpdateError?.((payload) => {
+      // If we suppressed the download for a dismissed version, ignore errors.
+      if (dismissedAutoDownloadRef.current) return;
+      setUpdateState((prev) => ({
+        ...prev,
+        autoDownloadStatus: 'error',
+        downloadError: payload.error,
+      }));
+    });
+
+    return () => {
+      cleanupNotAvailable?.();
+      cleanupAvailable?.();
+      cleanupProgress?.();
+      cleanupDownloaded?.();
+      cleanupError?.();
+    };
+  }, []);
+
   const performCheck = useCallback(async (currentVersion: string): Promise<UpdateCheckResult | null> => {
     debugLog('performCheck called', { currentVersion, IS_UPDATE_DEMO_MODE });
     
@@ -119,8 +297,16 @@ export function useUpdateCheck(): UseUpdateCheckResult {
       debugLog('Latest release version:', result.latestRelease?.version);
       const now = Date.now();
 
-      // Save last check time
-      localStorageAdapter.writeNumber(STORAGE_KEY_UPDATE_LAST_CHECK, now);
+      // Only advance last-check time and cache release on successful checks.
+      // Failed checks (result.error set, no latestRelease) must not update
+      // the timestamp — otherwise stale cached release data persists for an
+      // hour while the throttle prevents re-checking.
+      if (!result.error) {
+        localStorageAdapter.writeNumber(STORAGE_KEY_UPDATE_LAST_CHECK, now);
+        if (result.latestRelease) {
+          localStorageAdapter.writeString(STORAGE_KEY_UPDATE_LATEST_RELEASE, JSON.stringify(result.latestRelease));
+        }
+      }
 
       // Check if this version was dismissed
       const dismissedVersion = localStorageAdapter.readString(STORAGE_KEY_UPDATE_DISMISSED_VERSION);
@@ -156,11 +342,121 @@ export function useUpdateCheck(): UseUpdateCheckResult {
     }
   }, []);
 
-  const checkNow = useCallback(async () => {
-    // In demo mode, use fake version to allow checking
-    const version = IS_UPDATE_DEMO_MODE ? '0.0.1' : updateState.currentVersion;
-    return performCheck(version);
-  }, [performCheck, updateState.currentVersion]);
+  const checkNow = useCallback(async (): Promise<UpdateCheckResult | null> => {
+    // Prevent concurrent checks (performCheck owns isCheckingRef)
+    if (isCheckingRef.current) {
+      debugLog('checkNow: already checking, skipping');
+      return null;
+    }
+
+    // Cancel any pending startup auto-check to avoid racing with
+    // electron-updater's startAutoCheck — concurrent checkForUpdates()
+    // calls are rejected by electron-updater and would surface a false error.
+    if (startupCheckTimeoutRef.current) {
+      clearTimeout(startupCheckTimeoutRef.current);
+      startupCheckTimeoutRef.current = null;
+    }
+
+    // Clear any pending "up-to-date" auto-reset timer
+    if (manualCheckResetTimeoutRef.current) {
+      clearTimeout(manualCheckResetTimeoutRef.current);
+      manualCheckResetTimeoutRef.current = null;
+    }
+
+    // Reset dismissed flag so a manual retry can surface download events again
+    dismissedAutoDownloadRef.current = false;
+
+    // Immediately reflect 'checking' in the UI; reset download error so the user can retry
+    setUpdateState((prev) => {
+      // Eagerly sync the ref so the checkForUpdate gate below reads the updated value
+      if (prev.autoDownloadStatus === 'error') {
+        autoDownloadStatusRef.current = 'idle';
+      }
+      return {
+        ...prev,
+        manualCheckStatus: 'checking',
+        error: null,
+        // P2: reset download error state so auto-download can retry on next available update
+        autoDownloadStatus: prev.autoDownloadStatus === 'error' ? 'idle' : prev.autoDownloadStatus,
+        downloadError: prev.autoDownloadStatus === 'error' ? null : prev.downloadError,
+      };
+    });
+
+    // Skip check for dev/invalid builds (demo mode overrides to '0.0.1' inside performCheck)
+    const effectiveVersion = IS_UPDATE_DEMO_MODE ? '0.0.1' : currentVersionRef.current;
+    if (!effectiveVersion || effectiveVersion === '0.0.0') {
+      // Dev/invalid build — can't determine update status, reset to idle
+      setUpdateState((prev) => ({
+        ...prev,
+        manualCheckStatus: 'idle',
+      }));
+      return null;
+    }
+
+    // Delegate to performCheck (GitHub API) — completely independent of
+    // electron-updater's startAutoCheck() in the main process.
+    // performCheck sets isCheckingRef, isChecking, hasUpdate, latestRelease.
+    const result = await performCheck(effectiveVersion);
+
+    // Determine manual check status.  performCheck already suppressed dismissed
+    // versions in state (hasUpdate=false), so we must respect that here too —
+    // otherwise a dismissed release would be reported as 'available' and could
+    // trigger a background download via checkForUpdate below.
+    const dismissedVersion = localStorageAdapter.readString(STORAGE_KEY_UPDATE_DISMISSED_VERSION);
+    const isAvailable = result !== null && !result.error && result.hasUpdate &&
+      result.latestRelease?.version !== dismissedVersion;
+    const nextStatus: ManualCheckStatus =
+      result === null || result.error ? 'error' : isAvailable ? 'available' : 'up-to-date';
+
+    setUpdateState((prev) => ({
+      ...prev,
+      manualCheckStatus: nextStatus,
+    }));
+
+    if (nextStatus === 'up-to-date') {
+      // Auto-reset "up-to-date" badge back to idle after 5s
+      manualCheckResetTimeoutRef.current = setTimeout(() => {
+        setUpdateState((prev) => ({ ...prev, manualCheckStatus: 'idle' }));
+      }, 5000);
+    } else if ((nextStatus === 'available' || nextStatus === 'error') && autoDownloadStatusRef.current === 'idle') {
+      // Trigger electron-updater as a fallback. This covers two cases:
+      // 1. 'available': GitHub found an update but electron-updater hasn't
+      //    started a download yet — kick it off.
+      // 2. 'error': GitHub API failed (blocked/rate-limited), but the
+      //    electron-updater feed may still be reachable. Without this,
+      //    environments where api.github.com is blocked would never attempt
+      //    the auto-download path.
+      void netcattyBridge.get()?.checkForUpdate?.().then((res) => {
+        if (res?.error && res?.supported !== false) {
+          // Surface actual download-feed errors; unsupported platforms
+          // (res.supported === false) should keep autoDownloadStatus at
+          // 'idle' so the manual download link shows.
+          setUpdateState((prev) => ({
+            ...prev,
+            autoDownloadStatus: 'error',
+            downloadError: res.error,
+          }));
+        } else if (res?.checking) {
+          // Another check is already in flight — don't change status; the
+          // in-flight check will resolve via IPC events.
+        } else if (nextStatus === 'error' && !res?.error && !res?.available) {
+          // GitHub API failed but electron-updater says no update available.
+          // Clear the error status so Settings doesn't stay stuck in error state.
+          setUpdateState((prev) => ({
+            ...prev,
+            manualCheckStatus: 'up-to-date',
+          }));
+          manualCheckResetTimeoutRef.current = setTimeout(() => {
+            setUpdateState((prev) => ({ ...prev, manualCheckStatus: 'idle' }));
+          }, 5000);
+        }
+      }).catch(() => {
+        // Bridge unavailable — ignore; the manual download link remains visible
+      });
+    }
+
+    return result;
+  }, [performCheck]);
 
   const dismissUpdate = useCallback(() => {
     if (updateState.latestRelease?.version) {
@@ -189,6 +485,10 @@ export function useUpdateCheck(): UseUpdateCheckResult {
     window.open(url, '_blank', 'noopener,noreferrer');
   }, [updateState.latestRelease]);
 
+  const installUpdate = useCallback(() => {
+    netcattyBridge.get()?.installUpdate?.();
+  }, []);
+
   // Startup check with delay - runs once on mount
   useEffect(() => {
     debugLog('Startup check effect mounted, IS_UPDATE_DEMO_MODE:', IS_UPDATE_DEMO_MODE);
@@ -238,13 +538,60 @@ export function useUpdateCheck(): UseUpdateCheckResult {
     const now = Date.now();
     if (lastCheck && now - lastCheck < UPDATE_CHECK_INTERVAL_MS) {
       hasCheckedOnStartupRef.current = true;
+      // Hydrate cached release info so late-opening windows show the result
+      const cachedRelease = localStorageAdapter.readString(STORAGE_KEY_UPDATE_LATEST_RELEASE);
+      if (cachedRelease) {
+        try {
+          const release = JSON.parse(cachedRelease) as ReleaseInfo;
+          const dismissedVersion = localStorageAdapter.readString(STORAGE_KEY_UPDATE_DISMISSED_VERSION);
+          const isNewer = updateState.currentVersion.localeCompare(release.version, undefined, { numeric: true, sensitivity: 'base' }) < 0;
+          const showUpdate = isNewer && release.version !== dismissedVersion;
+          setUpdateState((prev) => ({
+            ...prev,
+            latestRelease: prev.latestRelease ?? release,
+            hasUpdate: prev.hasUpdate || showUpdate,
+            lastCheckedAt: lastCheck,
+          }));
+        } catch {
+          // Ignore corrupted cache
+        }
+      }
       return;
     }
 
     hasCheckedOnStartupRef.current = true;
     debugLog('Starting delayed update check for version:', updateState.currentVersion);
 
-    startupCheckTimeoutRef.current = setTimeout(() => {
+    startupCheckTimeoutRef.current = setTimeout(async () => {
+      // If electron-updater's auto-check already started a download, skip the
+      // redundant GitHub API check to avoid duplicate toast notifications.
+      if (autoDownloadStatusRef.current !== 'idle') {
+        debugLog('Skipping startup check — auto-download already active');
+        return;
+      }
+      // If the main process check is still in flight, reschedule the
+      // fallback instead of permanently skipping it — the auto-check may
+      // fail silently (check-phase errors aren't broadcast to the renderer).
+      try {
+        const snapshot = await netcattyBridge.get()?.getUpdateStatus?.();
+        if (snapshot?.isChecking) {
+          debugLog('Main process check still in flight — rescheduling fallback');
+          startupCheckTimeoutRef.current = setTimeout(async () => {
+            if (autoDownloadStatusRef.current !== 'idle') return;
+            // Re-check if the main process check is still running to avoid
+            // duplicate notifications on very slow networks.
+            try {
+              const snap = await netcattyBridge.get()?.getUpdateStatus?.();
+              if (snap?.isChecking || (snap?.status && snap.status !== 'idle')) return;
+            } catch { /* fall through */ }
+            debugLog('=== Rescheduled fallback check triggered ===');
+            void performCheck(updateState.currentVersion);
+          }, 5000);
+          return;
+        }
+      } catch {
+        // Bridge unavailable — fall through to GitHub check
+      }
       debugLog('=== Delayed check triggered ===');
       void performCheck(updateState.currentVersion);
     }, STARTUP_CHECK_DELAY_MS);
@@ -261,5 +608,6 @@ export function useUpdateCheck(): UseUpdateCheckResult {
     checkNow,
     dismissUpdate,
     openReleasePage,
+    installUpdate,
   };
 }

application/state/useVaultState.ts

@@ -44,6 +44,7 @@ type ExportableVaultData = {
   identities?: Identity[];
   snippets: Snippet[];
   customGroups: string[];
+  snippetPackages?: string[];
   knownHosts?: KnownHost[];
 };
 
@@ -557,9 +558,10 @@ export const useVaultState = () => {
       identities,
       snippets,
       customGroups,
+      snippetPackages,
       knownHosts,
     }),
-    [hosts, keys, identities, snippets, customGroups, knownHosts],
+    [hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts],
   );
 
   const importData = useCallback(
@@ -569,6 +571,7 @@ export const useVaultState = () => {
       if (payload.identities) updateIdentities(payload.identities);
       if (payload.snippets) updateSnippets(payload.snippets);
       if (payload.customGroups) updateCustomGroups(payload.customGroups);
+      if (payload.snippetPackages) updateSnippetPackages(payload.snippetPackages);
       if (payload.knownHosts) updateKnownHosts(payload.knownHosts);
     },
     [
@@ -577,6 +580,7 @@ export const useVaultState = () => {
       updateIdentities,
       updateSnippets,
       updateCustomGroups,
+      updateSnippetPackages,
       updateKnownHosts,
     ],
   );

components/AuthDialog.tsx

@@ -1,309 +0,0 @@
-import { ChevronDown, Eye, EyeOff, Key, Lock, User } from "lucide-react";
-import React, { useState } from "react";
-import { useI18n } from "../application/i18n/I18nProvider";
-import { cn } from "../lib/utils";
-import { Host, SSHKey } from "../types";
-import { DistroAvatar } from "./DistroAvatar";
-import { Button } from "./ui/button";
-import { Input } from "./ui/input";
-import { Label } from "./ui/label";
-import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
-import { ScrollArea } from "./ui/scroll-area";
-
-interface AuthDialogProps {
-  host: Host;
-  keys: SSHKey[];
-  onSubmit: (auth: {
-    username: string;
-    authMethod: "password" | "key";
-    password?: string;
-    keyId?: string;
-    saveCredentials: boolean;
-  }) => void;
-  onCancel: () => void;
-}
-
-const AuthDialog: React.FC<AuthDialogProps> = ({
-  host,
-  keys,
-  onSubmit,
-  onCancel,
-}) => {
-  const { t } = useI18n();
-  const [username, setUsername] = useState(host.username || "root");
-  const [authMethod, setAuthMethod] = useState<"password" | "key">("password");
-  const [password, setPassword] = useState("");
-  const [selectedKeyId, setSelectedKeyId] = useState<string | null>(null);
-  const [showPassword, setShowPassword] = useState(false);
-  const [saveCredentials, setSaveCredentials] = useState(true);
-  const [isKeySelectOpen, setIsKeySelectOpen] = useState(false);
-
-  const _selectedKey = keys.find((k) => k.id === selectedKeyId);
-
-  const handleSubmit = () => {
-    onSubmit({
-      username,
-      authMethod,
-      password: authMethod === "password" ? password : undefined,
-      keyId: authMethod === "key" ? (selectedKeyId ?? undefined) : undefined,
-      saveCredentials,
-    });
-  };
-
-  const isValid =
-    username.trim() &&
-    ((authMethod === "password" && password.trim()) ||
-      (authMethod === "key" && selectedKeyId));
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-      <div className="w-[420px] max-w-[90vw] bg-background border border-border/60 rounded-2xl shadow-2xl animate-in fade-in-0 zoom-in-95 duration-200">
-        {/* Header */}
-        <div className="px-6 py-5 border-b border-border/50">
-          <div className="flex items-center gap-3">
-            <DistroAvatar
-              host={host}
-              fallback={host.label.slice(0, 2).toUpperCase()}
-              className="h-12 w-12"
-            />
-            <div>
-              <h2 className="text-base font-semibold">{host.label}</h2>
-              <p className="text-xs text-muted-foreground font-mono">
-                SSH {host.hostname}:{host.port || 22}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        {/* Progress indicator */}
-        <div className="px-6 py-4">
-          <div className="flex items-center gap-3">
-            <div className="h-8 w-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center">
-              <User size={14} />
-            </div>
-            <div className="flex-1 h-0.5 bg-muted" />
-            <div
-              className={cn(
-                "h-8 w-8 rounded-full flex items-center justify-center transition-colors",
-                username.trim()
-                  ? "bg-primary/20 text-primary"
-                  : "bg-muted text-muted-foreground",
-              )}
-            >
-              {authMethod === "password" ? (
-                <Lock size={14} />
-              ) : (
-                <Key size={14} />
-              )}
-            </div>
-            <div className="flex-1 h-0.5 bg-muted" />
-            <div className="h-8 w-8 rounded-full bg-muted text-muted-foreground flex items-center justify-center text-xs font-mono">
-              {">_"}
-            </div>
-          </div>
-        </div>
-
-        {/* Auth method tabs */}
-        <div className="px-6">
-          <div className="flex gap-1 p-1 bg-secondary/80 rounded-lg border border-border/60">
-            <button
-              className={cn(
-                "flex-1 flex items-center justify-center gap-2 py-2 text-sm font-medium rounded-md transition-all",
-                authMethod === "password"
-                  ? "bg-primary text-primary-foreground shadow-sm"
-                  : "text-muted-foreground hover:text-foreground hover:bg-secondary",
-              )}
-              onClick={() => setAuthMethod("password")}
-            >
-              <Lock size={14} />
-              {t("terminal.auth.password")}
-            </button>
-            <button
-              className={cn(
-                "flex-1 flex items-center justify-center gap-2 py-2 text-sm font-medium rounded-md transition-all",
-                authMethod === "key"
-                  ? "bg-primary text-primary-foreground shadow-sm"
-                  : "text-muted-foreground hover:text-foreground hover:bg-secondary",
-              )}
-              onClick={() => setAuthMethod("key")}
-            >
-              <Key size={14} />
-              {t("terminal.auth.sshKey")}
-            </button>
-          </div>
-        </div>
-
-        {/* Form */}
-        <div className="px-6 py-4 space-y-4">
-          {/* Username field (shown when no username on host) */}
-          {!host.username && (
-            <div className="space-y-2">
-              <Label htmlFor="auth-username">{t("terminal.auth.username")}</Label>
-              <Input
-                id="auth-username"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                placeholder={t("terminal.auth.username.placeholder")}
-                autoFocus
-              />
-            </div>
-          )}
-
-          {/* Password field */}
-          {authMethod === "password" && (
-            <div className="space-y-2">
-              <Label htmlFor="auth-password">
-                {t("terminal.auth.passwordLabel")}
-              </Label>
-              <div className="relative">
-                <Input
-                  id="auth-password"
-                  type={showPassword ? "text" : "password"}
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  placeholder={t("terminal.auth.password.placeholder")}
-                  className="pr-10"
-                  autoFocus={!!host.username}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter" && isValid) {
-                      handleSubmit();
-                    }
-                  }}
-                />
-                <button
-                  type="button"
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-                  onClick={() => setShowPassword(!showPassword)}
-                >
-                  {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
-                </button>
-              </div>
-            </div>
-          )}
-
-          {/* Key selection */}
-          {authMethod === "key" && (
-            <div className="space-y-2">
-              <Label>{t("terminal.auth.selectKey")}</Label>
-              {keys.length === 0 ? (
-                <div className="text-sm text-muted-foreground p-3 border border-dashed border-border/60 rounded-lg text-center">
-                  {t("terminal.auth.noKeysHint")}
-                </div>
-              ) : (
-                <div className="space-y-2">
-                  {keys
-                    .filter((k) => k.category === "key")
-                    .slice(0, 5)
-                    .map((key) => (
-                      <button
-                        key={key.id}
-                        className={cn(
-                          "w-full flex items-center gap-3 px-3 py-2.5 rounded-lg border transition-colors text-left",
-                          selectedKeyId === key.id
-                            ? "border-primary bg-primary/5"
-                            : "border-border/50 hover:bg-secondary/50",
-                        )}
-                        onClick={() => setSelectedKeyId(key.id)}
-                      >
-                        <div
-                          className={cn(
-                            "h-8 w-8 rounded-lg flex items-center justify-center",
-                            "bg-primary/20 text-primary",
-                          )}
-                        >
-                          <Key size={14} />
-                        </div>
-                        <div className="flex-1 min-w-0">
-                          <div className="text-sm font-medium truncate">
-                            {key.label}
-                          </div>
-                          <div className="text-xs text-muted-foreground">
-                            {t("auth.keyType", { type: key.type })}
-                          </div>
-                        </div>
-                      </button>
-                    ))}
-                  {keys.filter((k) => k.category === "key").length > 5 && (
-                    <Popover
-                      open={isKeySelectOpen}
-                      onOpenChange={setIsKeySelectOpen}
-                    >
-                      <PopoverTrigger asChild>
-                        <Button variant="outline" className="w-full">
-                          {t("auth.showAllKeys")}
-                          <ChevronDown size={14} className="ml-2" />
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-80 p-0">
-                        <ScrollArea className="h-64">
-                          <div className="p-2 space-y-1">
-                            {keys
-                              .filter((k) => k.category === "key")
-                              .map((key) => (
-                                <button
-                                  key={key.id}
-                                  className={cn(
-                                    "w-full flex items-center gap-2 px-2 py-2 rounded-md text-left transition-colors",
-                                    selectedKeyId === key.id
-                                      ? "bg-primary/10"
-                                      : "hover:bg-secondary",
-                                  )}
-                                  onClick={() => {
-                                    setSelectedKeyId(key.id);
-                                    setIsKeySelectOpen(false);
-                                  }}
-                                >
-                                  <Key size={14} className="text-primary" />
-                                  <span className="text-sm truncate">
-                                    {key.label}
-                                  </span>
-                                  <span className="text-xs text-muted-foreground ml-auto">
-                                    {key.type}
-                                  </span>
-                                </button>
-                              ))}
-                          </div>
-                        </ScrollArea>
-                      </PopoverContent>
-                    </Popover>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-
-        {/* Footer */}
-        <div className="px-6 py-4 border-t border-border/50 flex items-center justify-between">
-          <Button variant="secondary" onClick={onCancel}>
-            {t("common.close")}
-          </Button>
-          <div className="flex items-center gap-2">
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button disabled={!isValid} onClick={handleSubmit}>
-                  {t("terminal.auth.continueSave")}
-                  <ChevronDown size={14} className="ml-2" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="w-40 p-1" align="end">
-                <button
-                  className="w-full px-3 py-2 text-sm text-left hover:bg-secondary rounded-md"
-                  onClick={() => {
-                    setSaveCredentials(false);
-                    handleSubmit();
-                  }}
-                  disabled={!isValid}
-                >
-                  {t("common.continue")}
-                </button>
-              </PopoverContent>
-            </Popover>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AuthDialog;

components/CloudSyncSettings.tsx

@@ -35,7 +35,7 @@ import { useI18n } from '../application/i18n/I18nProvider';
 import {
     findSyncPayloadEncryptedCredentialPaths,
 } from '../domain/credentials';
-import type { CloudProvider, ConflictInfo, SyncPayload, WebDAVAuthType, WebDAVConfig, S3Config } from '../domain/sync';
+import { isProviderReadyForSync, type CloudProvider, type ConflictInfo, type SyncPayload, type WebDAVAuthType, type WebDAVConfig, type S3Config } from '../domain/sync';
 import { cn } from '../lib/utils';
 import { Button } from './ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from './ui/dialog';
@@ -681,10 +681,9 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
 
     const disconnectOtherProviders = async (current: CloudProvider) => {
         const providers: CloudProvider[] = ['github', 'google', 'onedrive', 'webdav', 's3'];
-        const isActive = (status: string) => status === 'connected' || status === 'syncing';
         for (const provider of providers) {
             if (provider === current) continue;
-            if (isActive(sync.providers[provider].status)) {
+            if (isProviderReadyForSync(sync.providers[provider])) {
                 await sync.disconnectProvider(provider);
             }
         }
@@ -732,6 +731,7 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
     const [webdavPassword, setWebdavPassword] = useState('');
     const [webdavToken, setWebdavToken] = useState('');
     const [showWebdavSecret, setShowWebdavSecret] = useState(false);
+    const [webdavAllowInsecure, setWebdavAllowInsecure] = useState(false);
     const [webdavError, setWebdavError] = useState<string | null>(null);
     const [webdavErrorDetail, setWebdavErrorDetail] = useState<string | null>(null);
     const [isSavingWebdav, setIsSavingWebdav] = useState(false);
@@ -854,6 +854,7 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
         setWebdavUsername(config?.username || '');
         setWebdavPassword(config?.password || '');
         setWebdavToken(config?.token || '');
+        setWebdavAllowInsecure(config?.allowInsecure || false);
         setShowWebdavSecret(false);
         setWebdavError(null);
         setWebdavErrorDetail(null);
@@ -904,6 +905,7 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
             username: webdavAuthType === 'token' ? undefined : webdavUsername.trim(),
             password: webdavAuthType === 'token' ? undefined : webdavPassword,
             token: webdavAuthType === 'token' ? webdavToken.trim() : undefined,
+            allowInsecure: webdavAllowInsecure ? true : undefined,
         };
 
         setIsSavingWebdav(true);
@@ -1061,13 +1063,13 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
                         provider="github"
                         name="GitHub Gist"
                         icon={<Github size={24} />}
-                        isConnected={sync.providers.github.status === 'connected' || sync.providers.github.status === 'syncing'}
+                        isConnected={isProviderReadyForSync(sync.providers.github)}
                         isSyncing={sync.providers.github.status === 'syncing'}
                         isConnecting={sync.providers.github.status === 'connecting'}
                         account={sync.providers.github.account}
                         lastSync={sync.providers.github.lastSync}
                         error={sync.providers.github.error}
-                        disabled={sync.hasAnyConnectedProvider && sync.providers.github.status !== 'connected' && sync.providers.github.status !== 'syncing'}
+                        disabled={sync.hasAnyConnectedProvider && !isProviderReadyForSync(sync.providers.github)}
                         onConnect={handleConnectGitHub}
                         onDisconnect={() => sync.disconnectProvider('github')}
                         onSync={() => handleSync('github')}
@@ -1077,13 +1079,13 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
                         provider="google"
                         name="Google Drive"
                         icon={<GoogleDriveIcon className="w-6 h-6" />}
-                        isConnected={sync.providers.google.status === 'connected' || sync.providers.google.status === 'syncing'}
+                        isConnected={isProviderReadyForSync(sync.providers.google)}
                         isSyncing={sync.providers.google.status === 'syncing'}
                         isConnecting={sync.providers.google.status === 'connecting'}
                         account={sync.providers.google.account}
                         lastSync={sync.providers.google.lastSync}
                         error={sync.providers.google.error}
-                        disabled={sync.hasAnyConnectedProvider && sync.providers.google.status !== 'connected' && sync.providers.google.status !== 'syncing'}
+                        disabled={sync.hasAnyConnectedProvider && !isProviderReadyForSync(sync.providers.google)}
                         onConnect={handleConnectGoogle}
                         onDisconnect={() => sync.disconnectProvider('google')}
                         onSync={() => handleSync('google')}
@@ -1093,13 +1095,13 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
                         provider="onedrive"
                         name="Microsoft OneDrive"
                         icon={<OneDriveIcon className="w-6 h-6" />}
-                        isConnected={sync.providers.onedrive.status === 'connected' || sync.providers.onedrive.status === 'syncing'}
+                        isConnected={isProviderReadyForSync(sync.providers.onedrive)}
                         isSyncing={sync.providers.onedrive.status === 'syncing'}
                         isConnecting={sync.providers.onedrive.status === 'connecting'}
                         account={sync.providers.onedrive.account}
                         lastSync={sync.providers.onedrive.lastSync}
                         error={sync.providers.onedrive.error}
-                        disabled={sync.hasAnyConnectedProvider && sync.providers.onedrive.status !== 'connected' && sync.providers.onedrive.status !== 'syncing'}
+                        disabled={sync.hasAnyConnectedProvider && !isProviderReadyForSync(sync.providers.onedrive)}
                         onConnect={handleConnectOneDrive}
                         onDisconnect={() => sync.disconnectProvider('onedrive')}
                         onSync={() => handleSync('onedrive')}
@@ -1109,13 +1111,13 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
                         provider="webdav"
                         name={t('cloudSync.provider.webdav')}
                         icon={<Server size={24} />}
-                        isConnected={sync.providers.webdav.status === 'connected' || sync.providers.webdav.status === 'syncing'}
+                        isConnected={isProviderReadyForSync(sync.providers.webdav)}
                         isSyncing={sync.providers.webdav.status === 'syncing'}
                         isConnecting={sync.providers.webdav.status === 'connecting'}
                         account={sync.providers.webdav.account}
                         lastSync={sync.providers.webdav.lastSync}
                         error={sync.providers.webdav.error}
-                        disabled={sync.hasAnyConnectedProvider && sync.providers.webdav.status !== 'connected' && sync.providers.webdav.status !== 'syncing'}
+                        disabled={sync.hasAnyConnectedProvider && !isProviderReadyForSync(sync.providers.webdav)}
                         onEdit={openWebdavDialog}
                         onConnect={openWebdavDialog}
                         onDisconnect={() => sync.disconnectProvider('webdav')}
@@ -1126,13 +1128,13 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
                         provider="s3"
                         name={t('cloudSync.provider.s3')}
                         icon={<Database size={24} />}
-                        isConnected={sync.providers.s3.status === 'connected' || sync.providers.s3.status === 'syncing'}
+                        isConnected={isProviderReadyForSync(sync.providers.s3)}
                         isSyncing={sync.providers.s3.status === 'syncing'}
                         isConnecting={sync.providers.s3.status === 'connecting'}
                         account={sync.providers.s3.account}
                         lastSync={sync.providers.s3.lastSync}
                         error={sync.providers.s3.error}
-                        disabled={sync.hasAnyConnectedProvider && sync.providers.s3.status !== 'connected' && sync.providers.s3.status !== 'syncing'}
+                        disabled={sync.hasAnyConnectedProvider && !isProviderReadyForSync(sync.providers.s3)}
                         onEdit={openS3Dialog}
                         onConnect={openS3Dialog}
                         onDisconnect={() => sync.disconnectProvider('s3')}
@@ -1338,6 +1340,16 @@ export const SyncDashboard: React.FC<SyncDashboardProps> = ({
                             {t('cloudSync.webdav.showSecret')}
                         </label>
 
+                        <label className="flex items-center gap-2 text-sm text-muted-foreground select-none">
+                            <input
+                                type="checkbox"
+                                checked={webdavAllowInsecure}
+                                onChange={(e) => setWebdavAllowInsecure(e.target.checked)}
+                                className="accent-primary"
+                            />
+                            {t('cloudSync.webdav.allowInsecure')}
+                        </label>
+
                         {webdavError && (
                             <p className="text-sm text-red-500">{webdavError}</p>
                         )}

components/DistroAvatar.tsx

@@ -17,6 +17,11 @@ export const DISTRO_LOGOS: Record<string, string> = {
   redhat: "/distro/redhat.svg",
   oracle: "/distro/oracle.svg",
   kali: "/distro/kali.svg",
+  almalinux: "/distro/almalinux.svg",
+  // OS-level logos (used by local terminal tab icons)
+  macos: "/distro/macos.svg",
+  windows: "/distro/windows.svg",
+  linux: "/distro/linux.svg",
 };
 
 export const DISTRO_COLORS: Record<string, string> = {
@@ -32,6 +37,11 @@ export const DISTRO_COLORS: Record<string, string> = {
   redhat: "bg-[#EE0000]",
   oracle: "bg-[#C74634]",
   kali: "bg-[#0F6DB3]",
+  almalinux: "bg-[#173B66]",
+  // OS-level colors
+  macos: "bg-[#333333]",
+  windows: "bg-[#0078D4]",
+  linux: "bg-[#333333]",
   default: "bg-slate-600",
 };
 

components/GroupTreeItem.tsx

@@ -1,107 +0,0 @@
-import { ChevronRight,Folder,FolderOpen,FolderPlus,Plus } from 'lucide-react';
-import React,{ useMemo } from 'react';
-import { useI18n } from '../application/i18n/I18nProvider';
-import { cn } from '../lib/utils';
-import { GroupNode } from '../types';
-import { Collapsible,CollapsibleContent,CollapsibleTrigger } from './ui/collapsible';
-import { ContextMenu,ContextMenuContent,ContextMenuItem,ContextMenuTrigger } from './ui/context-menu';
-
-interface GroupTreeItemProps {
-  node: GroupNode;
-  depth: number;
-  expandedPaths: Set<string>;
-  onToggle: (path: string) => void;
-  onSelectGroup: (path: string) => void;
-  selectedGroup: string | null;
-  onEditGroup: (path: string) => void;
-  onNewHost: (path: string) => void;
-  onNewSubfolder: (path: string) => void;
-  isManagedGroup?: (path: string) => boolean;
-}
-
-export const GroupTreeItem: React.FC<GroupTreeItemProps> = ({
-  node,
-  depth,
-  expandedPaths,
-  onToggle,
-  onSelectGroup,
-  selectedGroup,
-  onEditGroup,
-  onNewHost,
-  onNewSubfolder,
-}) => {
-  const { t } = useI18n();
-  const isExpanded = expandedPaths.has(node.path);
-  const hasChildren = node.children && Object.keys(node.children).length > 0;
-  const paddingLeft = `${depth * 12 + 12}px`;
-  const isSelected = selectedGroup === node.path;
-
-  const childNodes = useMemo(() => {
-    return node.children
-      ? (Object.values(node.children) as unknown as GroupNode[]).sort((a, b) => a.name.localeCompare(b.name))
-      : [];
-  }, [node.children]);
-
-  return (
-    <Collapsible open={isExpanded} onOpenChange={() => onToggle(node.path)}>
-      <ContextMenu>
-        <ContextMenuTrigger>
-          <CollapsibleTrigger asChild>
-            <div
-              className={cn(
-                "flex items-center py-1.5 pr-2 text-sm font-medium cursor-pointer transition-colors select-none group relative rounded-r-md",
-                isSelected ? "bg-primary/10 text-primary border-l-2 border-primary" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
-              )}
-              style={{ paddingLeft }}
-              onClick={() => onSelectGroup(node.path)}
-            >
-              <div className="mr-1.5 flex-shrink-0 w-4 h-4 flex items-center justify-center">
-                {hasChildren && (
-                  <div className={cn("transition-transform duration-200", isExpanded ? "rotate-90" : "")}>
-                    <ChevronRight size={12} />
-                  </div>
-                )}
-              </div>
-              <div className="mr-2 text-primary/80 group-hover:text-primary transition-colors">
-                {isExpanded ? <FolderOpen size={16} /> : <Folder size={16} />}
-              </div>
-              <span className="truncate flex-1">{node.name}</span>
-              {node.hosts.length > 0 && (
-                <span className="text-[10px] opacity-70 bg-background/50 px-1.5 rounded-full border border-border">
-                  {node.hosts.length}
-                </span>
-              )}
-            </div>
-          </CollapsibleTrigger>
-        </ContextMenuTrigger>
-        <ContextMenuContent>
-          <ContextMenuItem onClick={() => onNewHost(node.path)}>
-            <Plus className="mr-2 h-4 w-4" /> {t("action.newHost")}
-          </ContextMenuItem>
-          <ContextMenuItem onClick={() => onNewSubfolder(node.path)}>
-            <FolderPlus className="mr-2 h-4 w-4" /> {t("action.newSubfolder")}
-          </ContextMenuItem>
-        </ContextMenuContent>
-      </ContextMenu>
-
-      {hasChildren && (
-        <CollapsibleContent>
-          {childNodes.map((child) => (
-            <GroupTreeItem
-              key={child.path}
-              node={child}
-              depth={depth + 1}
-              expandedPaths={expandedPaths}
-              onToggle={onToggle}
-              onSelectGroup={onSelectGroup}
-              selectedGroup={selectedGroup}
-              onEditGroup={onEditGroup}
-              onNewHost={onNewHost}
-              onNewSubfolder={onNewSubfolder}
-            />
-          ))}
-        </CollapsibleContent>
-      )}
-    </Collapsible>
-  );
-};

components/HostDetailsPanel.tsx

@@ -156,13 +156,6 @@ const HostDetailsPanel: React.FC<HostDetailsPanelProps> = ({
   // Group input state for inline creation suggestion
   const [groupInputValue, setGroupInputValue] = useState(form.group || "");
 
-  // Check if the entered group is new (doesn't exist)
-  // Reserved for future use: showing inline "create new group" suggestion
-  const _isNewGroup = useMemo(() => {
-    const trimmed = groupInputValue.trim();
-    return trimmed.length > 0 && !groups.includes(trimmed);
-  }, [groupInputValue, groups]);
-
   useEffect(() => {
     if (initialData) {
       // Ensure telnetEnabled is set when protocol is telnet

components/HostForm.tsx

@@ -1,382 +0,0 @@
-import { Key, Lock, Plus, Save, Server, X } from "lucide-react";
-import React, { useEffect, useState } from "react";
-import { useI18n } from "../application/i18n/I18nProvider";
-import { cn } from "../lib/utils";
-import { Host, SSHKey } from "../types";
-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 { Switch } from "./ui/switch";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./ui/select";
-
-interface HostFormProps {
-  initialData?: Host | null;
-  availableKeys: SSHKey[];
-  groups: string[];
-  onSave: (host: Host) => void;
-  onCancel: () => void;
-}
-
-const HostForm: React.FC<HostFormProps> = ({
-  initialData,
-  availableKeys,
-  groups,
-  onSave,
-  onCancel,
-}) => {
-  const { t } = useI18n();
-  const [formData, setFormData] = useState<Partial<Host>>(
-    initialData || {
-      label: "",
-      hostname: "",
-      port: 22,
-      username: "root",
-      tags: [],
-      os: "linux",
-      group: "General",
-      identityFileId: "",
-    },
-  );
-
-  const [authType, setAuthType] = useState<"password" | "key">(
-    initialData?.identityFileId ? "key" : "password",
-  );
-
-  const [tagInput, setTagInput] = useState("");
-
-  const handleAddTag = () => {
-    const tag = tagInput.trim();
-    if (tag && !formData.tags?.includes(tag)) {
-      setFormData((prev) => ({ ...prev, tags: [...(prev.tags || []), tag] }));
-      setTagInput("");
-    }
-  };
-
-  const handleRemoveTag = (tagToRemove: string) => {
-    setFormData((prev) => ({
-      ...prev,
-      tags: (prev.tags || []).filter((t) => t !== tagToRemove),
-    }));
-  };
-
-  const handleTagKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      handleAddTag();
-    }
-  };
-
-  // Effect to ensure we have a valid auth state if switching back and forth
-  useEffect(() => {
-    if (authType === "password") {
-      setFormData((prev) => ({ ...prev, identityFileId: "" }));
-    } else if (
-      authType === "key" &&
-      !formData.identityFileId &&
-      availableKeys.length > 0
-    ) {
-      // Default to first key if none selected
-      setFormData((prev) => ({ ...prev, identityFileId: availableKeys[0].id }));
-    }
-  }, [authType, availableKeys, formData.identityFileId]);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (formData.label && formData.hostname && formData.username) {
-      onSave({
-        ...formData,
-        id: initialData?.id || crypto.randomUUID(),
-        tags: formData.tags || [],
-        port: formData.port || 22,
-        group: formData.group || "General",
-        identityFileId:
-          authType === "key" ? formData.identityFileId : undefined,
-        createdAt: initialData?.createdAt || Date.now(),
-      } as Host);
-    }
-  };
-
-  return (
-    <Dialog open={true} onOpenChange={() => onCancel()}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Server className="h-5 w-5 text-primary" />
-            {initialData ? t("hostForm.title.edit") : t("hostForm.title.new")}
-          </DialogTitle>
-          <DialogDescription className="sr-only">
-            {initialData ? t("hostForm.desc.edit") : t("hostForm.desc.new")}
-          </DialogDescription>
-        </DialogHeader>
-
-        <form onSubmit={handleSubmit} className="grid gap-4 py-4">
-          <div className="grid gap-2">
-            <Label htmlFor="label">{t("hostForm.field.label")}</Label>
-            <Input
-              id="label"
-              placeholder={t("hostForm.placeholder.label")}
-              value={formData.label}
-              onChange={(e) =>
-                setFormData({ ...formData, label: e.target.value })
-              }
-              required
-            />
-          </div>
-
-          <div className="grid grid-cols-3 gap-4">
-            <div className="col-span-2 grid gap-2">
-              <Label htmlFor="hostname">{t("hostForm.field.hostname")}</Label>
-              <Input
-                id="hostname"
-                placeholder={t("hostForm.placeholder.hostname")}
-                value={formData.hostname}
-                onChange={(e) =>
-                  setFormData({ ...formData, hostname: e.target.value })
-                }
-                required
-              />
-            </div>
-            <div className="grid gap-2">
-              <Label htmlFor="port">{t("hostForm.field.port")}</Label>
-              <Input
-                id="port"
-                type="number"
-                value={formData.port}
-                onChange={(e) =>
-                  setFormData({ ...formData, port: parseInt(e.target.value) })
-                }
-                required
-              />
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div className="grid gap-2">
-              <Label htmlFor="username">{t("hostForm.field.username")}</Label>
-              <Input
-                id="username"
-                value={formData.username}
-                onChange={(e) =>
-                  setFormData({ ...formData, username: e.target.value })
-                }
-                required
-              />
-            </div>
-            <div className="grid gap-2">
-              <Label htmlFor="os">{t("hostForm.field.osType")}</Label>
-              <Select
-                value={formData.os}
-                onValueChange={(val: "linux" | "windows" | "macos") =>
-                  setFormData({ ...formData, os: val })
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder={t("hostForm.placeholder.selectOs")} />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="linux">Linux</SelectItem>
-                  <SelectItem value="windows">Windows</SelectItem>
-                  <SelectItem value="macos">macOS</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-
-          <div className="grid gap-2">
-            <Label htmlFor="group">{t("hostForm.field.group")}</Label>
-            <Input
-              id="group"
-              placeholder={t("hostForm.placeholder.group")}
-              value={formData.group}
-              onChange={(e) =>
-                setFormData({ ...formData, group: e.target.value })
-              }
-              list="group-suggestions"
-              autoComplete="off"
-            />
-            <datalist id="group-suggestions">
-              {groups.map((g) => (
-                <option key={g} value={g} />
-              ))}
-            </datalist>
-          </div>
-
-          <div className="grid gap-2">
-            <Label htmlFor="tags">{t("hostForm.field.tags")}</Label>
-            <div className="flex gap-2">
-              <Input
-                id="tags"
-                placeholder={t("hostForm.placeholder.addTag")}
-                value={tagInput}
-                onChange={(e) => setTagInput(e.target.value)}
-                onKeyDown={handleTagKeyDown}
-                className="flex-1"
-              />
-              <Button
-                type="button"
-                variant="secondary"
-                size="icon"
-                onClick={handleAddTag}
-                disabled={!tagInput.trim()}
-              >
-                <Plus size={16} />
-              </Button>
-            </div>
-            {formData.tags && formData.tags.length > 0 && (
-              <div className="flex flex-wrap gap-1.5 mt-1">
-                {formData.tags.map((tag) => (
-                  <span
-                    key={tag}
-                    className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-primary/10 text-primary text-xs"
-                  >
-                    {tag}
-                    <button
-                      type="button"
-                      onClick={() => handleRemoveTag(tag)}
-                      className="hover:bg-primary/20 rounded-full p-0.5"
-                    >
-                      <X size={12} />
-                    </button>
-                  </span>
-                ))}
-              </div>
-            )}
-          </div>
-
-          <div className="space-y-3 pt-2">
-            <div className="flex items-center justify-between space-x-2 border rounded-md p-3">
-              <div className="space-y-0.5">
-                <Label htmlFor="sftp-sudo" className="text-base">
-                  {t("hostDetails.sftp.sudo")}
-                </Label>
-                <p className="text-xs text-muted-foreground">
-                  {t("hostDetails.sftp.sudo.desc")}
-                </p>
-                {formData.sftpSudo && authType === "key" && (
-                  <p className="text-xs text-amber-500 mt-1">
-                    {t("hostDetails.sftp.sudo.passwordWarning")}
-                  </p>
-                )}
-              </div>
-              <Switch
-                id="sftp-sudo"
-                checked={formData.sftpSudo || false}
-                onCheckedChange={(checked) =>
-                  setFormData({ ...formData, sftpSudo: checked })
-                }
-              />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="sftp-encoding">
-                {t("hostDetails.sftp.encoding")}
-              </Label>
-              <Select
-                value={formData.sftpEncoding || "auto"}
-                onValueChange={(val) =>
-                  setFormData({ ...formData, sftpEncoding: val as Host["sftpEncoding"] })
-                }
-              >
-                <SelectTrigger id="sftp-encoding">
-                  <SelectValue placeholder={t("sftp.encoding.label")} />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="auto">{t("sftp.encoding.auto")}</SelectItem>
-                  <SelectItem value="utf-8">{t("sftp.encoding.utf8")}</SelectItem>
-                  <SelectItem value="gb18030">{t("sftp.encoding.gb18030")}</SelectItem>
-                </SelectContent>
-              </Select>
-              <p className="text-xs text-muted-foreground">
-                {t("hostDetails.sftp.encoding.desc")}
-              </p>
-            </div>
-
-            <Label>{t("hostForm.auth.method")}</Label>
-            <div className="grid grid-cols-2 gap-4">
-              <div
-                className={cn(
-                  "border rounded-md p-3 flex flex-col items-center justify-center gap-2 cursor-pointer transition-all hover:bg-accent/50",
-                  authType === "password"
-                    ? "border-primary bg-primary/5 text-primary ring-1 ring-primary"
-                    : "text-muted-foreground",
-                )}
-                onClick={() => setAuthType("password")}
-              >
-                <Lock size={20} />
-                <span className="text-xs font-medium">{t("hostForm.auth.password")}</span>
-              </div>
-              <div
-                className={cn(
-                  "border rounded-md p-3 flex flex-col items-center justify-center gap-2 cursor-pointer transition-all hover:bg-accent/50",
-                  authType === "key"
-                    ? "border-primary bg-primary/5 text-primary ring-1 ring-primary"
-                    : "text-muted-foreground",
-                )}
-                onClick={() => setAuthType("key")}
-              >
-                <Key size={20} />
-                <span className="text-xs font-medium">{t("hostForm.auth.sshKey")}</span>
-              </div>
-            </div>
-
-            {authType === "key" && (
-              <div className="animate-in fade-in zoom-in-95 duration-200">
-                <Select
-                  value={formData.identityFileId || ""}
-                  onValueChange={(val) =>
-                    setFormData({ ...formData, identityFileId: val })
-                  }
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder={t("hostForm.auth.selectKey")} />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {availableKeys.map((key) => (
-                      <SelectItem key={key.id} value={key.id}>
-                        {key.label} ({key.type})
-                      </SelectItem>
-                    ))}
-                    {availableKeys.length === 0 && (
-                      <SelectItem value="none" disabled>
-                        {t("hostForm.auth.noKeys")}
-                      </SelectItem>
-                    )}
-                  </SelectContent>
-                </Select>
-                {availableKeys.length === 0 && (
-                  <p className="text-[10px] text-destructive mt-1">
-                    {t("hostForm.auth.noKeysHint")}
-                  </p>
-                )}
-              </div>
-            )}
-          </div>
-
-          <DialogFooter>
-            <Button type="button" variant="ghost" onClick={onCancel}>
-              {t("common.cancel")}
-            </Button>
-            <Button type="submit">
-              <Save className="mr-2 h-4 w-4" /> {t("hostForm.saveHost")}
-            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default HostForm;

components/KeyManager.tsx

@@ -1,411 +0,0 @@
-import {
-  Key,
-  LayoutGrid,
-  List as ListIcon,
-  Pencil,
-  Plus,
-  Search,
-  Shield,
-  Trash2,
-} from "lucide-react";
-import React, { useMemo, useState } from "react";
-import { useI18n } from "../application/i18n/I18nProvider";
-import { KeyType } from "../domain/models";
-import { cn } from "../lib/utils";
-import { SSHKey } from "../types";
-import { Button } from "./ui/button";
-import { Card, CardDescription, CardTitle } from "./ui/card";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "./ui/dialog";
-import { Input } from "./ui/input";
-import { Label } from "./ui/label";
-import { Textarea } from "./ui/textarea";
-
-interface KeyManagerProps {
-  keys: SSHKey[];
-  onSave: (key: SSHKey) => void;
-  onDelete: (id: string) => void;
-}
-
-const KeyManager: React.FC<KeyManagerProps> = ({ keys, onSave, onDelete }) => {
-  const { t } = useI18n();
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [panelMode, setPanelMode] = useState<"new" | "edit">("new");
-  const [draftKey, setDraftKey] = useState<Partial<SSHKey>>({
-    id: "",
-    label: "",
-    type: "RSA",
-    privateKey: "",
-    publicKey: "",
-    created: Date.now(),
-  });
-  const [generateMode, setGenerateMode] = useState(false);
-  const [search, setSearch] = useState("");
-  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
-
-  const handleGenerate = () => {
-    // Simulate Key Generation
-    const mockKey =
-      `-----BEGIN ${draftKey.type} PRIVATE KEY-----\n` +
-      `MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQC${Math.random().toString(36).substring(7)}\n` +
-      `... (simulated generated content) ...\n` +
-      `-----END ${draftKey.type} PRIVATE KEY-----`;
-
-    setDraftKey({ ...draftKey, privateKey: mockKey });
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!draftKey.label || !draftKey.privateKey) return;
-
-    const payload: SSHKey = {
-      id: draftKey.id || crypto.randomUUID(),
-      label: draftKey.label,
-      type: (draftKey.type as KeyType) || "RSA",
-      privateKey: draftKey.privateKey,
-      publicKey: draftKey.publicKey?.trim() || undefined,
-      created: draftKey.created || Date.now(),
-      source: draftKey.source || (generateMode ? "generated" : "imported"),
-      category: draftKey.category || "key",
-    };
-    onSave(payload);
-    setIsDialogOpen(false);
-    setGenerateMode(false);
-  };
-
-  const openPanelForKey = (key: SSHKey) => {
-    setPanelMode("edit");
-    setDraftKey({ ...key });
-    setIsDialogOpen(true);
-    setGenerateMode(false);
-  };
-
-  const openPanelNew = (isGenerate = false) => {
-    setPanelMode("new");
-    setGenerateMode(isGenerate);
-    setDraftKey({
-      id: "",
-      label: "",
-      type: "RSA",
-      privateKey: isGenerate
-        ? "Click generate to create a new key pair..."
-        : "",
-      publicKey: "",
-      created: Date.now(),
-    });
-    setIsDialogOpen(true);
-  };
-
-  const handleDelete = (id: string) => {
-    onDelete(id);
-    if (draftKey.id === id) {
-      setIsDialogOpen(false);
-      setDraftKey({
-        id: "",
-        label: "",
-        type: "RSA",
-        privateKey: "",
-        publicKey: "",
-        created: Date.now(),
-      });
-    }
-  };
-
-  const filteredKeys = useMemo(() => {
-    const term = search.trim().toLowerCase();
-    return keys.filter((k) => {
-      if (!term) return true;
-      return (
-        k.label.toLowerCase().includes(term) ||
-        (k.type || "").toString().toLowerCase().includes(term)
-      );
-    });
-  }, [keys, search]);
-
-  const derivedPublicKey = useMemo(() => {
-    if (draftKey.publicKey) return draftKey.publicKey;
-    if (!draftKey.label) return "Generated By netcatty";
-    return `ssh-${(draftKey.type || "ed25519").toLowerCase()} AAAAC3NzaC1lZDI1NTE5AAAA${(
-      draftKey.label || "netcatty"
-    )
-      .replace(/\s+/g, "")
-      .slice(0, 8)} Generated By netcatty`;
-  }, [draftKey.label, draftKey.type, draftKey.publicKey]);
-
-  return (
-    <div className="px-2.5 py-2.5 lg:px-3 lg:py-3 h-full overflow-y-auto space-y-3.5 relative">
-      <div className="flex flex-wrap items-center gap-3 bg-secondary/60 border border-border/70 rounded-xl px-2 py-1.5 shadow-sm">
-        <Button
-          size="sm"
-          variant="secondary"
-          className="h-8 px-3 gap-2"
-          disabled
-        >
-          Key
-          <span className="text-[10px] px-2 rounded-full h-5 min-w-[22px] flex items-center justify-center bg-primary/10 text-primary border border-border/70">
-            {keys.length}
-          </span>
-        </Button>
-        <div className="ml-auto flex items-center gap-2">
-          <div className="relative">
-            <Search
-              size={14}
-              className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
-            />
-            <Input
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              placeholder="Search keys..."
-              className="h-9 pl-8 w-44 md:w-56"
-            />
-          </div>
-          <Button
-            size="icon"
-            variant={viewMode === "grid" ? "secondary" : "ghost"}
-            className="h-9 w-9"
-            onClick={() => setViewMode("grid")}
-          >
-            <LayoutGrid size={16} />
-          </Button>
-          <Button
-            size="icon"
-            variant={viewMode === "list" ? "secondary" : "ghost"}
-            className="h-9 w-9"
-            onClick={() => setViewMode("list")}
-          >
-            <ListIcon size={16} />
-          </Button>
-          <Button size="sm" onClick={() => openPanelNew(false)}>
-            <Plus size={14} className="mr-2" /> Import
-          </Button>
-          <Button
-            size="sm"
-            variant="secondary"
-            onClick={() => openPanelNew(true)}
-          >
-            Generate
-          </Button>
-        </div>
-      </div>
-
-      <div className="space-y-3">
-        <div className="flex items-center justify-between px-1">
-          <h2 className="text-base font-semibold text-muted-foreground">
-            Keys
-          </h2>
-        </div>
-
-        <div className="space-y-3">
-          {filteredKeys.length === 0 && (
-            <div className="flex flex-col items-center justify-center h-64 text-muted-foreground">
-              <div className="h-16 w-16 rounded-2xl bg-secondary/80 flex items-center justify-center mb-4">
-                <Shield size={32} className="opacity-60" />
-              </div>
-              <h3 className="text-lg font-semibold text-foreground mb-2">
-                Set up your keys
-              </h3>
-              <p className="text-sm text-center max-w-sm">
-                Import or generate SSH keys for secure authentication.
-              </p>
-            </div>
-          )}
-
-          <div
-            className={
-              viewMode === "grid"
-                ? "grid gap-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
-                : "flex flex-col gap-0"
-            }
-          >
-            {filteredKeys.map((key) => (
-              <Card
-                key={key.id}
-                className={cn(
-                  "group cursor-pointer soft-card elevate rounded-xl",
-                  viewMode === "grid"
-                    ? "h-[68px] px-3 py-2"
-                    : "h-14 px-3 py-2 hover:bg-secondary/60 rounded-lg transition-colors",
-                )}
-                onClick={() => openPanelForKey(key)}
-              >
-                <div className="flex items-center gap-3 h-full">
-                  <div className="h-9 w-9 rounded-md bg-primary/15 text-primary flex items-center justify-center">
-                    <Key size={16} />
-                  </div>
-                  <div className="min-w-0 flex-1">
-                    <CardTitle className="text-sm font-semibold truncate">
-                      {key.label}
-                    </CardTitle>
-                    <CardDescription className="text-[11px] font-mono text-muted-foreground truncate">
-                      Type {key.type}
-                    </CardDescription>
-                    <div className="text-[10px] text-muted-foreground/80 font-mono truncate">
-                      SHA256:{key.id.substring(0, 16)}...
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      className="h-8 w-8"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        openPanelForKey(key);
-                      }}
-                    >
-                      <Pencil size={14} />
-                    </Button>
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      className="h-8 w-8 text-destructive hover:text-destructive"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleDelete(key.id);
-                      }}
-                    >
-                      <Trash2 size={14} />
-                    </Button>
-                  </div>
-                </div>
-              </Card>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>
-              {panelMode === "new"
-                ? t("keychain.keyDialog.newTitle")
-                : t("keychain.keyDialog.editTitle")}
-            </DialogTitle>
-            <DialogDescription className="sr-only">
-              {panelMode === "new"
-                ? t("keychain.keyDialog.newDesc")
-                : t("keychain.keyDialog.editDesc")}
-            </DialogDescription>
-          </DialogHeader>
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div className="space-y-2">
-              <Label>{t("keychain.field.label")}</Label>
-              <Input
-                value={draftKey.label}
-                onChange={(e) =>
-                  setDraftKey({ ...draftKey, label: e.target.value })
-                }
-                placeholder={t("keychain.field.labelPlaceholder")}
-                required
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label>{t("keychain.field.privateKeyRequired")}</Label>
-              <Textarea
-                value={draftKey.privateKey}
-                onChange={(e) =>
-                  setDraftKey({ ...draftKey, privateKey: e.target.value })
-                }
-                placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
-                className="min-h-[160px] font-mono text-xs"
-                required
-              />
-              {generateMode && (
-                <Button
-                  type="button"
-                  size="sm"
-                  variant="secondary"
-                  onClick={handleGenerate}
-                >
-                  {t("keychain.generate.generate")}
-                </Button>
-              )}
-            </div>
-
-            <div className="space-y-2">
-              <Label>{t("keychain.field.publicKey")}</Label>
-              <Textarea
-                value={derivedPublicKey}
-                onChange={(e) =>
-                  setDraftKey({ ...draftKey, publicKey: e.target.value })
-                }
-                placeholder="ssh-ed25519 AAAAC3... user@host"
-                className="min-h-[90px] font-mono text-xs"
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label className="flex items-center gap-2">
-                {t("terminal.auth.certificate")}{" "}
-                <span className="text-[10px] px-2 py-0.5 rounded-full bg-muted text-muted-foreground">
-                  {t("common.optional")}
-                </span>
-              </Label>
-              <Textarea
-                placeholder={t("keychain.field.certificatePlaceholder")}
-                className="min-h-[80px] text-xs"
-              />
-            </div>
-
-            <div className="border border-dashed border-border/80 rounded-xl p-4 text-center space-y-2 bg-background/60">
-              <div className="text-sm text-muted-foreground">
-                {t("keychain.import.dropHint")}
-              </div>
-              <Button
-                type="button"
-                variant="secondary"
-                onClick={() => {
-                  // mock file import
-                  setDraftKey({
-                    ...draftKey,
-                    label: draftKey.label || t("keychain.import.importedKeyLabel"),
-                    privateKey:
-                      draftKey.privateKey ||
-                      "-----BEGIN OPENSSH PRIVATE KEY-----\nAAAAC3NzaC1lZDI1NTE5AAAA\n-----END OPENSSH PRIVATE KEY-----",
-                  });
-                }}
-              >
-                {t("keychain.import.importFromFile")}
-              </Button>
-            </div>
-
-            <DialogFooter>
-              {panelMode === "edit" && draftKey.id && (
-                <Button
-                  type="button"
-                  variant="ghost"
-                  className="text-destructive mr-auto"
-                  onClick={() => handleDelete(draftKey.id!)}
-                >
-                  {t("common.delete")}
-                </Button>
-              )}
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={() => setIsDialogOpen(false)}
-              >
-                {t("common.cancel")}
-              </Button>
-              <Button type="submit">
-                {panelMode === "new"
-                  ? t("keychain.import.saveKey")
-                  : t("keychain.keyDialog.updateKey")}
-              </Button>
-            </DialogFooter>
-          </form>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-};
-
-export default KeyManager;

components/KeychainManager.tsx

@@ -450,11 +450,6 @@ echo $3 >> "$FILE"`);
     [onDeleteIdentity, panel, closePanel],
   );
 
-  // Copy to clipboard
-  const _copyToClipboard = useCallback((_text: string) => {
-    navigator.clipboard.writeText(_text);
-  }, []);
-
   // Get icon for key source
   const getKeyIcon = (key: SSHKey) => {
     if (key.certificate) return <BadgeCheck size={16} />;
@@ -506,46 +501,6 @@ echo $3 >> "$FILE"`);
     [],
   );
 
-  // Handle drag and drop
-  const _handleDrop = useCallback((event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    const file = event.dataTransfer.files?.[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      const content = e.target?.result as string;
-      if (content) {
-        let detectedType: KeyType = "ED25519";
-        const lc = content.toLowerCase();
-        if (lc.includes("rsa")) detectedType = "RSA";
-        else if (lc.includes("ecdsa") || lc.includes("ec private"))
-          detectedType = "ECDSA";
-        else if (lc.includes("ed25519")) detectedType = "ED25519";
-
-        const label = file.name.replace(/\.(pem|key|pub|ppk)$/i, "");
-
-        setDraftKey((prev) => ({
-          ...prev,
-          privateKey: content,
-          label: prev.label || label,
-          type: detectedType,
-        }));
-      }
-    };
-    reader.readAsText(file);
-  }, []);
-
-  const _handleDragOver = useCallback(
-    (event: React.DragEvent<HTMLDivElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-    },
-    [],
-  );
-
   return (
     <div className="h-full flex relative">
       {/* Hidden file input */}

components/PortForwardingNew.tsx

@@ -130,7 +130,7 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
         const result = await startTunnel(
           rule,
           _host,
-          keys.map((k) => ({ id: k.id, privateKey: k.privateKey })),
+          keys.map((k) => ({ id: k.id, privateKey: k.privateKey, passphrase: k.passphrase })),
           (status, error) => {
             // Show toast on error (only once)
             if (status === "error" && error && !errorShown) {
@@ -307,8 +307,6 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
     const label =
       newFormDraft.label?.trim() ||
       (() => {
-        // Host lookup reserved for future label enhancement (e.g., "Local:8080 → api.example.com:80 via server1")
-        const _host = hosts.find((h) => h.id === newFormDraft.hostId);
         switch (newFormDraft.type) {
           case "local":
             return `Local:${newFormDraft.localPort} → ${newFormDraft.remoteHost}:${newFormDraft.remotePort}`;
@@ -546,12 +544,6 @@ const PortForwarding: React.FC<PortForwardingProps> = ({
     );
   };
 
-  // Handle skip wizard (just save with defaults)
-  const _skipWizard = () => {
-    setShowWizard(false);
-    resetWizard();
-  };
-
   // Render wizard panel content
   const hasRules = filteredRules.length > 0;
 

components/QuickConnectWizard.tsx

@@ -14,7 +14,7 @@ import React, { useMemo, useState } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import type { QuickConnectTarget } from "../domain/quickConnect";
 import { cn } from "../lib/utils";
-import { Host, KnownHost, SSHKey } from "../types";
+import { Host, SSHKey } from "../types";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 import { Label } from "./ui/label";
@@ -30,7 +30,6 @@ interface QuickConnectWizardProps {
   open: boolean;
   target: QuickConnectTarget;
   keys: SSHKey[];
-  knownHosts: KnownHost[];
   warnings?: string[];
   onConnect: (host: Host) => void;
   onSaveHost?: (host: Host) => void;
@@ -42,7 +41,6 @@ const QuickConnectWizard: React.FC<QuickConnectWizardProps> = ({
   open,
   target,
   keys,
-  knownHosts,
   warnings,
   onConnect,
   onSaveHost,
@@ -69,16 +67,7 @@ const QuickConnectWizard: React.FC<QuickConnectWizardProps> = ({
   const [password, setPassword] = useState("");
   const [selectedKeyId, setSelectedKeyId] = useState<string | null>(null);
   const [showPassword, setShowPassword] = useState(false);
-  const [saveCredentials, _setSaveCredentials] = useState(true);
-
-  // Check if host is in known hosts
-  const _existingKnownHost = useMemo(() => {
-    return knownHosts.find(
-      (kh) =>
-        kh.hostname === target.hostname &&
-        (kh.port === port || (!kh.port && port === 22)),
-    );
-  }, [knownHosts, target.hostname, port]);
+  const [saveCredentials] = useState(true);
 
   // Reset state when target changes
   React.useEffect(() => {

components/SFTPModal.tsx

@@ -24,7 +24,6 @@ import { useSftpModalFileActions } from "./sftp-modal/hooks/useSftpModalFileActi
 import { useSftpModalKeyboardShortcuts } from "./sftp-modal/hooks/useSftpModalKeyboardShortcuts";
 import { joinPath, isRootPath, getParentPath } from "./sftp-modal/pathUtils";
 import { toast } from "./ui/toast";
-import { Dialog, DialogContent } from "./ui/dialog";
 
 interface SFTPModalProps {
   host: Host;
@@ -93,6 +92,7 @@ const SFTPModal: React.FC<SFTPModalProps> = ({
   const {
     sftpAutoSync,
     sftpShowHiddenFiles,
+    setSftpShowHiddenFiles,
     sftpUseCompressedUpload,
     hotkeyScheme,
     keyBindings,
@@ -204,6 +204,7 @@ const SFTPModal: React.FC<SFTPModalProps> = ({
   const {
     currentPath,
     setCurrentPath,
+    currentPathRef,
     files,
     loading,
     setLoading,
@@ -384,6 +385,7 @@ const SFTPModal: React.FC<SFTPModalProps> = ({
     dismissTask,
   } = useSftpModalTransfers({
     currentPath,
+    currentPathRef,
     isLocalSession,
     joinPath: joinPathForSession,
     ensureSftp,
@@ -475,13 +477,13 @@ const SFTPModal: React.FC<SFTPModalProps> = ({
     initialUploadTriggeredRef.current = true;
 
     // Trigger upload with full DropEntry data (preserves directory structure)
-    handleUploadEntries(initialEntriesToUpload);
-  }, [initialEntriesToUpload, open, loading, handleUploadEntries]);
+    void handleUploadEntries(initialEntriesToUpload);
+  }, [handleUploadEntries, initialEntriesToUpload, loading, open]);
 
   // Display files with parent entry (like SftpView)
   const displayFiles = useMemo(() => {
     // Filter hidden files using utility function
-    const visibleFiles = filterHiddenFiles(files, sftpShowHiddenFiles, isLocalSession);
+    const visibleFiles = filterHiddenFiles(files, sftpShowHiddenFiles);
 
     // Check if we're at root
     const atRoot = isRootPathForSession(currentPath);
@@ -495,7 +497,7 @@ const SFTPModal: React.FC<SFTPModalProps> = ({
       lastModified: undefined,
     };
     return [parentEntry, ...visibleFiles.filter((f) => f.name !== "..")];
-  }, [files, currentPath, isRootPathForSession, sftpShowHiddenFiles, isLocalSession]);
+  }, [files, currentPath, isRootPathForSession, sftpShowHiddenFiles]);
 
   // Sorted files
   const sortedFiles = useMemo(() => {
@@ -541,6 +543,8 @@ const SFTPModal: React.FC<SFTPModalProps> = ({
 
     return parentEntry ? [parentEntry, ...sorted] : sorted;
   }, [displayFiles, sortField, sortOrder]);
+  const hasFiles = files.length > 0;
+  const hasDisplayFiles = sortedFiles.length > 0;
   const {
     fileListRef,
     handleFileListScroll,
@@ -644,10 +648,13 @@ const SFTPModal: React.FC<SFTPModalProps> = ({
     }
   };
 
+  if (!open) return null;
+
   return (
-    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
-      <DialogContent className="max-w-4xl h-[80vh] flex flex-col p-0 gap-0">
+    <>
+      <div className="h-full flex flex-col bg-background border-r border-border/60 overflow-hidden">
         <SftpModalHeader
+          onClose={handleClose}
           t={t}
           host={host}
           credentials={credentials}
@@ -685,6 +692,10 @@ const SFTPModal: React.FC<SFTPModalProps> = ({
           onCreateFile={handleCreateFile}
           onFileSelect={handleFileSelect}
           onFolderSelect={handleFolderSelect}
+          showHiddenFiles={sftpShowHiddenFiles}
+          onToggleShowHiddenFiles={() =>
+            setSftpShowHiddenFiles(!sftpShowHiddenFiles)
+          }
           onUpdateHost={onUpdateHost}
           onNavigateToBookmark={(path) => setCurrentPath(path)}
         />
@@ -693,7 +704,8 @@ const SFTPModal: React.FC<SFTPModalProps> = ({
           t={t}
           currentPath={currentPath}
           isLocalSession={isLocalSession}
-          files={files}
+          hasFiles={hasFiles}
+          hasDisplayFiles={hasDisplayFiles}
           selectedFiles={selectedFiles}
           dragActive={dragActive}
           loading={loading}
@@ -743,7 +755,7 @@ const SFTPModal: React.FC<SFTPModalProps> = ({
           onDownloadSelected={handleDownloadSelected}
           onDeleteSelected={handleDeleteSelected}
         />
-      </DialogContent>
+      </div>
 
       <SftpModalDialogs
         t={t}
@@ -798,7 +810,7 @@ const SFTPModal: React.FC<SFTPModalProps> = ({
         editorWordWrap={editorWordWrap}
         onToggleWordWrap={() => setEditorWordWrap(!editorWordWrap)}
       />
-    </Dialog>
+    </>
   );
 };
 

components/ScriptsSidePanel.tsx

@@ -0,0 +1,221 @@
+/**
+ * ScriptsSidePanel - Lightweight scripts browser for the terminal side panel
+ *
+ * Shows snippets organized by package hierarchy with breadcrumb navigation.
+ * Clicking a snippet executes it in the focused terminal session.
+ */
+
+import { ChevronRight, Package, Search, Zap } from 'lucide-react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { useI18n } from '../application/i18n/I18nProvider';
+import { cn } from '../lib/utils';
+import { Snippet } from '../types';
+import { Input } from './ui/input';
+import { ScrollArea } from './ui/scroll-area';
+
+interface ScriptsSidePanelProps {
+  snippets: Snippet[];
+  packages: string[];
+  onSnippetClick: (command: string) => void;
+  isVisible?: boolean;
+}
+
+const ScriptsSidePanelInner: React.FC<ScriptsSidePanelProps> = ({
+  snippets,
+  packages,
+  onSnippetClick,
+  isVisible = true,
+}) => {
+  const { t } = useI18n();
+  const [selectedPackage, setSelectedPackage] = useState<string | null>(null);
+  const [search, setSearch] = useState('');
+
+  const displayedPackages = useMemo(() => {
+    if (!selectedPackage) {
+      const absolutePaths = packages.filter(p => p.startsWith('/'));
+      const relativePaths = packages.filter(p => !p.startsWith('/'));
+
+      const results: { name: string; path: string; count: number }[] = [];
+
+      const relativeRoots = relativePaths
+        .map((p) => p.split('/')[0])
+        .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 });
+      });
+
+      const absoluteRoots = absolutePaths
+        .map((p) => {
+          const cleanPath = p.substring(1);
+          return cleanPath.split('/')[0];
+        })
+        .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}`;
+        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((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) => {
+        const pkg = s.package || '';
+        return pkg === path || pkg.startsWith(path + '/');
+      }).length;
+      return { name, path, count };
+    });
+  }, [packages, selectedPackage, snippets]);
+
+  const displayedSnippets = useMemo(() => {
+    let result = snippets.filter((s) => (s.package || '') === (selectedPackage || ''));
+    if (search.trim()) {
+      const s = search.toLowerCase();
+      result = result.filter(sn =>
+        sn.label.toLowerCase().includes(s) ||
+        sn.command.toLowerCase().includes(s)
+      );
+    }
+    return result;
+  }, [snippets, selectedPackage, search]);
+
+  // Also filter packages by search when at root level
+  const filteredPackages = useMemo(() => {
+    if (!search.trim()) return displayedPackages;
+    const s = search.toLowerCase();
+    return displayedPackages.filter(pkg => pkg.name.toLowerCase().includes(s));
+  }, [displayedPackages, search]);
+
+  const breadcrumb = useMemo(() => {
+    if (!selectedPackage) return [];
+    const isAbsolute = selectedPackage.startsWith('/');
+    const parts = selectedPackage.split('/').filter(Boolean);
+    return parts.map((name, idx) => {
+      const pathSegments = parts.slice(0, idx + 1);
+      const path = isAbsolute ? `/${pathSegments.join('/')}` : pathSegments.join('/');
+      return { name, path };
+    });
+  }, [selectedPackage]);
+
+  const handleSnippetClick = useCallback((command: string) => {
+    onSnippetClick(command);
+  }, [onSnippetClick]);
+
+  if (!isVisible) return null;
+
+  const hasAnyContent = snippets.length > 0 || packages.length > 0;
+
+  return (
+    <div className="h-full flex flex-col bg-background overflow-hidden">
+      {/* Search */}
+      <div className="shrink-0 px-2 py-1.5 border-b border-border/50">
+        <div className="relative">
+          <Search size={12} className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder={t('snippets.searchPlaceholder')}
+            className="h-7 pl-7 text-xs bg-muted/30 border-none"
+          />
+        </div>
+      </div>
+
+      {/* Breadcrumb */}
+      <div className="shrink-0 flex items-center gap-1 px-3 py-1.5 text-[11px] border-b border-border/30 min-h-[28px]">
+        <button
+          className={cn(
+            "hover:text-primary transition-colors truncate",
+            !selectedPackage ? "text-foreground font-medium" : "text-muted-foreground"
+          )}
+          onClick={() => setSelectedPackage(null)}
+        >
+          {t('terminal.toolbar.library')}
+        </button>
+        {breadcrumb.map((b) => (
+          <React.Fragment key={b.path}>
+            <ChevronRight size={10} className="text-muted-foreground shrink-0" />
+            <button
+              className="text-muted-foreground hover:text-primary transition-colors truncate"
+              onClick={() => setSelectedPackage(b.path)}
+            >
+              {b.name}
+            </button>
+          </React.Fragment>
+        ))}
+      </div>
+
+      {/* Content */}
+      <ScrollArea className="flex-1">
+        <div className="py-1">
+          {!hasAnyContent && (
+            <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+              <Zap size={24} className="opacity-40 mb-2" />
+              <span className="text-xs">{t('terminal.toolbar.noSnippets')}</span>
+            </div>
+          )}
+
+          {/* Packages */}
+          {filteredPackages.map((pkg) => (
+            <button
+              key={pkg.path}
+              className="w-full flex items-center gap-2.5 px-3 py-2 text-left hover:bg-accent/50 transition-colors"
+              onClick={() => { setSelectedPackage(pkg.path); setSearch(''); }}
+            >
+              <div className="w-6 h-6 rounded-md bg-primary/10 text-primary flex items-center justify-center shrink-0">
+                <Package size={12} />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="text-xs font-medium truncate">{pkg.name}</div>
+                <div className="text-[10px] text-muted-foreground">
+                  {t('snippets.package.count', { count: pkg.count })}
+                </div>
+              </div>
+              <ChevronRight size={12} className="text-muted-foreground shrink-0" />
+            </button>
+          ))}
+
+          {/* Snippets */}
+          {displayedSnippets.map((s) => (
+            <button
+              key={s.id}
+              onClick={() => handleSnippetClick(s.command)}
+              className="w-full text-left px-3 py-2 hover:bg-accent/50 transition-colors flex flex-col gap-0.5"
+            >
+              <span className="text-xs font-medium truncate">{s.label}</span>
+              <span className="text-muted-foreground truncate font-mono text-[10px] max-w-full">
+                {s.command}
+              </span>
+            </button>
+          ))}
+
+          {hasAnyContent && displayedSnippets.length === 0 && filteredPackages.length === 0 && search.trim() && (
+            <div className="px-3 py-4 text-xs text-muted-foreground italic text-center">
+              {t('common.noResultsFound')}
+            </div>
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};
+
+export const ScriptsSidePanel = memo(ScriptsSidePanelInner);
+ScriptsSidePanel.displayName = 'ScriptsSidePanel';

components/SelectHostPanel.tsx

@@ -197,19 +197,6 @@ const SelectHostPanel: React.FC<SelectHostPanelProps> = ({
     }));
   }, [currentPath]);
 
-  const _handleBack = () => {
-    if (currentPath) {
-      const parts = currentPath.split("/");
-      if (parts.length > 1) {
-        setCurrentPath(parts.slice(0, -1).join("/"));
-      } else {
-        setCurrentPath(null);
-      }
-    } else {
-      onBack();
-    }
-  };
-
   return (
     <div
       className={cn(

components/SettingsApplicationTab.tsx

@@ -4,7 +4,7 @@ import AppLogo from "./AppLogo";
 import { Button } from "./ui/button";
 import { cn } from "../lib/utils";
 import { useApplicationBackend } from "../application/state/useApplicationBackend";
-import { useUpdateCheck } from "../application/state/useUpdateCheck";
+import type { UpdateState, UseUpdateCheckResult } from "../application/state/useUpdateCheck";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { SettingsTabContent } from "./settings/settings-ui";
 import { toast } from "./ui/toast";
@@ -63,13 +63,18 @@ const ActionRow: React.FC<{
   </button>
 );
 
-export default function SettingsApplicationTab() {
+interface SettingsApplicationTabProps {
+  updateState: UpdateState;
+  checkNow: UseUpdateCheckResult['checkNow'];
+  openReleasePage: UseUpdateCheckResult['openReleasePage'];
+  installUpdate: UseUpdateCheckResult['installUpdate'];
+}
+
+export default function SettingsApplicationTab({ updateState, checkNow, openReleasePage, installUpdate }: SettingsApplicationTabProps) {
   const { t } = useI18n();
   const { openExternal, getApplicationInfo } = useApplicationBackend();
-  const { updateState, checkNow, openReleasePage } = useUpdateCheck();
   const [appInfo, setAppInfo] = useState<AppInfo>({ name: "Netcatty", version: "" });
   const [lastCheckResult, setLastCheckResult] = useState<'none' | 'available' | 'upToDate'>('none');
-  const [hasAutoChecked, setHasAutoChecked] = useState(false);
 
   useEffect(() => {
     let cancelled = false;
@@ -93,19 +98,6 @@ export default function SettingsApplicationTab() {
   const isUpdateDemoMode = typeof window !== 'undefined' &&
     window.localStorage?.getItem('debug.updateDemo') === '1';
 
-  // Auto check for updates when entering this page
-  useEffect(() => {
-    if (hasAutoChecked) return;
-    if (updateState.isChecking) return;
-
-    // In demo mode or when we have a valid version, auto-check
-    const canCheck = isUpdateDemoMode || (appInfo.version && appInfo.version !== '0.0.0');
-    if (!canCheck) return;
-
-    setHasAutoChecked(true);
-    void checkNow();
-  }, [hasAutoChecked, updateState.isChecking, isUpdateDemoMode, appInfo.version, checkNow]);
-
   const handleCheckForUpdates = async () => {
     // In demo mode, allow checking even for dev builds
     if (!isUpdateDemoMode && (!appInfo.version || appInfo.version === '0.0.0')) {
@@ -124,8 +116,9 @@ export default function SettingsApplicationTab() {
         t('update.available.message', { version: result.latestRelease.version }),
         t('update.available.title')
       );
-      // Open the release page
-      openReleasePage();
+      // Don't auto-open the release page here — checkNow() already triggers
+      // electron-updater on supported platforms, and the Settings > System tab
+      // shows a "Manual Download" link on unsupported platforms.
     } else if (result) {
       setLastCheckResult('upToDate');
       toast.success(
@@ -154,18 +147,25 @@ export default function SettingsApplicationTab() {
                 <span className="text-sm text-muted-foreground">
                   {appInfo.version ? appInfo.version : " "}
                 </span>
-                {/* Update available badge - inline with version */}
-                {updateState.hasUpdate && updateState.latestRelease && (
+                {/* Update badge - reflects auto-download state */}
+                {updateState.latestRelease && (updateState.hasUpdate || updateState.autoDownloadStatus === 'downloading' || updateState.autoDownloadStatus === 'ready') && (
                   <button
-                    onClick={() => void openReleasePage()}
+                    onClick={() => updateState.autoDownloadStatus === 'ready' ? installUpdate() : void openReleasePage()}
                     className={cn(
                       "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium",
-                      "bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300",
-                      "hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors cursor-pointer"
+                      updateState.autoDownloadStatus === 'ready'
+                        ? "bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 hover:bg-green-200 dark:hover:bg-green-800"
+                        : "bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800",
+                      "transition-colors cursor-pointer"
                     )}
                   >
                     <ArrowUpCircle size={12} />
-                    v{updateState.latestRelease.version} {t('update.downloadNow')}
+                    v{updateState.latestRelease.version}{' '}
+                    {updateState.autoDownloadStatus === 'ready'
+                      ? t('update.restartNow')
+                      : updateState.autoDownloadStatus === 'downloading'
+                        ? `${updateState.downloadPercent}%`
+                        : t('update.downloadNow')}
                   </button>
                 )}
               </div>

components/SettingsPage.tsx

@@ -3,10 +3,12 @@
  * This component is rendered in a separate Electron window
  */
 import { AppWindow, Cloud, FileType, HardDrive, Keyboard, Palette, TerminalSquare, X } from "lucide-react";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useSettingsState } from "../application/state/useSettingsState";
+import { usePortForwardingState } from "../application/state/usePortForwardingState";
 import { useVaultState } from "../application/state/useVaultState";
 import { useWindowControls } from "../application/state/useWindowControls";
+import { useUpdateCheck } from "../application/state/useUpdateCheck";
 import { I18nProvider, useI18n } from "../application/i18n/I18nProvider";
 import SettingsApplicationTab from "./SettingsApplicationTab";
 import SettingsAppearanceTab from "./settings/tabs/SettingsAppearanceTab";
@@ -31,17 +33,38 @@ const SettingsSyncTabWithVault: React.FC = () => {
         keys,
         identities,
         snippets,
+        customGroups,
+        snippetPackages,
+        knownHosts,
         importDataFromString,
         clearVaultData,
     } = useVaultState();
 
+    const { rules: portForwardingRules, importRules: importPortForwardingRules } = usePortForwardingState();
+
+    // Strip transient runtime fields before passing to sync
+    const portForwardingRulesForSync = useMemo(
+        () =>
+            portForwardingRules.map((rule) => ({
+                ...rule,
+                status: "inactive" as const,
+                error: undefined,
+                lastUsedAt: undefined,
+            })),
+        [portForwardingRules],
+    );
+
+    const vault = useMemo(
+        () => ({ hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts }),
+        [hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts],
+    );
+
     return (
         <SettingsSyncTab
-            hosts={hosts}
-            keys={keys}
-            identities={identities}
-            snippets={snippets}
+            vault={vault}
+            portForwardingRules={portForwardingRulesForSync}
             importDataFromString={importDataFromString}
+            importPortForwardingRules={importPortForwardingRules}
             clearVaultData={clearVaultData}
         />
     );
@@ -50,6 +73,7 @@ const SettingsSyncTabWithVault: React.FC = () => {
 const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }) => {
     const { t } = useI18n();
     const { notifyRendererReady, closeSettingsWindow } = useWindowControls();
+    const { updateState, checkNow, installUpdate, openReleasePage } = useUpdateCheck();
     const [activeTab, setActiveTab] = useState("application");
     const [mountedTabs, setMountedTabs] = useState(() => new Set(["application"]));
 
@@ -144,7 +168,14 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                 </div>
 
                 <div className="flex-1 h-full flex flex-col min-h-0 bg-muted/10">
-                    {mountedTabs.has("application") && <SettingsApplicationTab />}
+                    {mountedTabs.has("application") && (
+                        <SettingsApplicationTab
+                            updateState={updateState}
+                            checkNow={checkNow}
+                            openReleasePage={openReleasePage}
+                            installUpdate={installUpdate}
+                        />
+                    )}
 
                     {mountedTabs.has("appearance") && (
                         <SettingsAppearanceTab
@@ -216,6 +247,10 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                             closeToTray={settings.closeToTray}
                             setCloseToTray={settings.setCloseToTray}
                             hotkeyRegistrationError={settings.hotkeyRegistrationError}
+                            updateState={updateState}
+                            checkNow={checkNow}
+                            installUpdate={installUpdate}
+                            openReleasePage={openReleasePage}
                         />
                     )}
                 </div>

components/SftpSidePanel.tsx

@@ -0,0 +1,618 @@
+/**
+ * SftpSidePanel - SFTP file browser rendered as a resizable side panel
+ *
+ * Reuses SftpView's components (SftpPaneView, SftpContextProvider, etc.)
+ * to provide a unified SFTP experience. Renders a single pane (left side only).
+ *
+ * IMPORTANT: Does NOT use the global activeTabStore to avoid conflicts with
+ * the main SftpView tab. Instead manages pane visibility internally.
+ *
+ * Used in TerminalLayer to provide SFTP alongside terminal sessions.
+ */
+
+import React, { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import { useI18n } from "../application/i18n/I18nProvider";
+import { useSftpState } from "../application/state/useSftpState";
+import { useSftpBackend } from "../application/state/useSftpBackend";
+import { useSftpFileAssociations } from "../application/state/useSftpFileAssociations";
+import { getParentPath } from "../application/state/sftp/utils";
+import { buildCacheKey } from "../application/state/sftp/sharedRemoteHostCache";
+import { logger } from "../lib/logger";
+import type { DropEntry } from "../lib/sftpFileUtils";
+import { Host, Identity, SSHKey } from "../types";
+import type { TransferTask } from "../types";
+import { toast } from "./ui/toast";
+import { DistroAvatar } from "./DistroAvatar";
+
+import { SftpPaneView } from "./sftp/SftpPaneView";
+import { SftpOverlays } from "./sftp/SftpOverlays";
+import { SftpTransferQueue } from "./sftp/SftpTransferQueue";
+import { SftpContextProvider } from "./sftp";
+import { useSftpViewPaneCallbacks } from "./sftp/hooks/useSftpViewPaneCallbacks";
+import { useSftpViewTabs } from "./sftp/hooks/useSftpViewTabs";
+
+interface SftpSidePanelProps {
+  hosts: Host[];
+  keys: SSHKey[];
+  identities: Identity[];
+  updateHosts: (hosts: Host[]) => void;
+  /** The host to connect to (follows focused terminal) */
+  activeHost: Host | null;
+  initialLocation?: { hostId: string; path: string } | null;
+  showWorkspaceHostHeader?: boolean;
+  isVisible?: boolean;
+  renderOverlays?: boolean;
+  pendingUpload?: {
+    requestId: string;
+    hostId: string;
+    connectionKey: string;
+    targetPath?: string;
+    entries: DropEntry[];
+  } | null;
+  onPendingUploadHandled?: (requestId: string) => void;
+  sftpDoubleClickBehavior: "open" | "transfer";
+  sftpAutoSync: boolean;
+  sftpShowHiddenFiles: boolean;
+  sftpUseCompressedUpload: boolean;
+  editorWordWrap: boolean;
+  setEditorWordWrap: (value: boolean) => void;
+  onGetTerminalCwd?: () => Promise<string | null>;
+}
+
+const SftpSidePanelInner: React.FC<SftpSidePanelProps> = ({
+  hosts,
+  keys,
+  identities,
+  updateHosts,
+  activeHost,
+  initialLocation,
+  showWorkspaceHostHeader = false,
+  isVisible = true,
+  renderOverlays = true,
+  pendingUpload = null,
+  onPendingUploadHandled,
+  sftpDoubleClickBehavior,
+  sftpAutoSync,
+  sftpShowHiddenFiles,
+  sftpUseCompressedUpload,
+  editorWordWrap,
+  setEditorWordWrap,
+  onGetTerminalCwd,
+}) => {
+  const { t } = useI18n();
+
+  const fileWatchHandlers = useMemo(() => ({
+    onFileWatchSynced: (payload: { remotePath: string }) => {
+      const fileName = payload.remotePath.split('/').pop() || payload.remotePath;
+      toast.success(t('sftp.autoSync.success', { fileName }));
+      logger.info("[SFTP] File auto-synced to remote", payload);
+    },
+    onFileWatchError: (payload: { error: string }) => {
+      toast.error(t('sftp.autoSync.error', { error: payload.error }));
+      logger.error("[SFTP] File auto-sync failed", payload);
+    },
+  }), [t]);
+
+  const sftpOptions = useMemo(() => ({
+    ...fileWatchHandlers,
+    useCompressedUpload: sftpUseCompressedUpload,
+    defaultShowHiddenFiles: sftpShowHiddenFiles,
+    autoConnectLocalOnMount: false,
+  }), [fileWatchHandlers, sftpUseCompressedUpload, sftpShowHiddenFiles]);
+
+  const sftp = useSftpState(hosts, keys, identities, sftpOptions);
+  const { showSaveDialog, startStreamTransfer } = useSftpBackend();
+
+  const sftpRef = useRef(sftp);
+  sftpRef.current = sftp;
+
+  const behaviorRef = useRef(sftpDoubleClickBehavior);
+  behaviorRef.current = sftpDoubleClickBehavior;
+
+  const autoSyncRef = useRef(sftpAutoSync);
+  autoSyncRef.current = sftpAutoSync;
+
+  const { getOpenerForFile, setOpenerForExtension } = useSftpFileAssociations();
+  const getOpenerForFileRef = useRef(getOpenerForFile);
+  getOpenerForFileRef.current = getOpenerForFile;
+
+  const handleToggleHiddenFiles = useCallback((paneId: string) => {
+    const pane = sftpRef.current.leftTabs.tabs.find((tab) => tab.id === paneId);
+    if (!pane) return;
+    sftpRef.current.setShowHiddenFiles("left", paneId, !pane.showHiddenFiles);
+  }, []);
+
+  // NOTE: We intentionally do NOT sync to activeTabStore here.
+  // activeTabStore is a global singleton shared with SftpView.
+  // Writing to it here would corrupt SftpView's left pane visibility.
+
+  const {
+    leftCallbacks,
+    rightCallbacks,
+    dragCallbacks,
+    draggedFiles,
+    permissionsState,
+    setPermissionsState,
+    showTextEditor,
+    setShowTextEditor,
+    textEditorTarget,
+    setTextEditorTarget,
+    textEditorContent,
+    setTextEditorContent,
+    showFileOpenerDialog,
+    setShowFileOpenerDialog,
+    fileOpenerTarget,
+    setFileOpenerTarget,
+    handleSaveTextFile,
+    handleFileOpenerSelect,
+    handleSelectSystemApp,
+  } = useSftpViewPaneCallbacks({
+    sftpRef,
+    behaviorRef,
+    autoSyncRef,
+    getOpenerForFileRef,
+    setOpenerForExtension,
+    t,
+    showSaveDialog,
+    startStreamTransfer,
+    getSftpIdForConnection: sftp.getSftpIdForConnection,
+  });
+
+  const {
+    leftPanes,
+    showHostPickerLeft,
+    showHostPickerRight,
+    hostSearchLeft,
+    hostSearchRight,
+    setShowHostPickerLeft,
+    setShowHostPickerRight,
+    setHostSearchLeft,
+    setHostSearchRight,
+    handleHostSelectLeft,
+    handleHostSelectRight,
+  } = useSftpViewTabs({ sftp, sftpRef });
+
+  // Auto-connect when activeHost changes.
+  // Uses sftpRef to avoid re-triggering on every sftp state change.
+  const connectedKeyRef = useRef<string | null>(null);
+  // Store the Host object used for the current connection so the header
+  // can show session-time overrides even during deferred host switches.
+  const connectedHostObjRef = useRef<Host | null>(null);
+  const lastAppliedInitialLocationKeyRef = useRef<string | null>(null);
+  const handledPendingUploadIdRef = useRef<string | null>(null);
+  // Maps tab IDs to the connectionKey used to create them, so we can
+  // correctly identify tabs when the same host ID has different overrides.
+  const tabConnectionKeyMapRef = useRef<Map<string, string>>(new Map());
+  const pendingConnectionKeyRef = useRef<string | null>(null);
+  const prevIsVisibleRef = useRef(isVisible);
+
+  // Reset location guard when the panel is reopened so the terminal cwd
+  // is re-applied even if it matches the previous session's path.
+  useEffect(() => {
+    if (isVisible && !prevIsVisibleRef.current) {
+      lastAppliedInitialLocationKeyRef.current = null;
+    }
+    prevIsVisibleRef.current = isVisible;
+  }, [isVisible]);
+
+  // Navigate SFTP to the terminal's current working directory
+  const handleGoToTerminalCwd = useCallback(async () => {
+    if (!onGetTerminalCwd) return;
+    const cwd = await onGetTerminalCwd();
+    if (cwd) {
+      sftpRef.current.navigateTo("left", cwd);
+    }
+  }, [onGetTerminalCwd]);
+
+  // Track whether there's active work that should block connection switching.
+  // Computed outside the effect so it can be in the dependency array.
+  const hasActiveTransfers = useMemo(
+    () => sftp.transfers.some((t) => t.status === "pending" || t.status === "transferring"),
+    [sftp.transfers],
+  );
+  // Block host-following while any connection-sensitive UI or operation
+  // is active: text editor, permissions dialog, file-opener dialog, or
+  // auto-synced external file watches.
+  const hasActiveWork = hasActiveTransfers || showTextEditor || !!permissionsState || showFileOpenerDialog
+    || (sftp.activeFileWatchCountRef?.current ?? 0) > 0;
+
+  useEffect(() => {
+    if (!activeHost) return;
+
+    const s = sftpRef.current;
+
+    // Serial terminals don't support SFTP — disconnect any existing
+    // connection (remote or local) so the panel doesn't remain bound to
+    // a previous host.
+    const proto = activeHost.protocol;
+    if (proto === 'serial' || activeHost.id?.startsWith('serial-')) {
+      // Serial terminals don't support SFTP. Just clear the tracked
+      // connection key so switching back to a remote terminal will
+      // trigger auto-connect. Don't disconnect existing tabs — they
+      // may be reused when focus returns.
+      connectedKeyRef.current = null;
+      return;
+    }
+    // Local terminals connect to the local file browser
+    if (proto === 'local' || activeHost.id?.startsWith('local-')) {
+      if (hasActiveWork) return;
+      const leftConn = s.leftPane.connection;
+      if (leftConn?.isLocal) {
+        // Already connected locally
+        connectedKeyRef.current = "local";
+        return;
+      }
+      // Check for an existing local tab to reuse
+      const existingLocalTab = s.leftTabs.tabs.find((tab) =>
+        tab.connection?.isLocal && tab.connection.status === "connected",
+      );
+      if (existingLocalTab) {
+        s.selectTab("left", existingLocalTab.id);
+        connectedKeyRef.current = "local";
+        return;
+      }
+      connectedKeyRef.current = "local";
+      // Preserve existing remote tab when switching to local
+      const needsNewTab = !!(leftConn && leftConn.status === "connected");
+      if (needsNewTab) {
+        s.connect("left", "local", { forceNewTab: true });
+      } else if (leftConn) {
+        // Await disconnect before connecting locally to avoid the async
+        // disconnect wiping out the fresh local connection.
+        void s.disconnect("left").then(() => s.connect("left", "local"));
+      } else {
+        s.connect("left", "local");
+      }
+      return;
+    }
+    // Build a connection key that accounts for session-time overrides
+    // (same host ID may have different port/protocol in different workspace panes).
+    // Uses buildCacheKey to stay consistent with the key recorded on upload tasks.
+    const connectionKey = buildCacheKey(activeHost.id, activeHost.hostname, activeHost.port, activeHost.protocol, activeHost.sftpSudo, activeHost.username);
+    if (connectedKeyRef.current === connectionKey) return;
+
+    // Don't switch connections while transfers or editor are active
+    if (hasActiveWork) return;
+    logger.info("[SftpSidePanel] Auto-connect triggered", {
+      hostId: activeHost.id,
+      hostLabel: activeHost.label,
+      protocol: activeHost.protocol,
+      hostname: activeHost.hostname,
+    });
+
+    // Check if an existing SFTP tab matches this exact endpoint.
+    // We track which connectionKey was used to create each tab so that
+    // tabs for the same host ID with different session-time overrides
+    // (port/protocol) are not incorrectly reused.
+    const tabs = s.leftTabs.tabs;
+    const existingTab = tabs.find((tab) => {
+      if (!tab.connection || tab.connection.hostId !== activeHost.id) return false;
+      // Don't reuse errored tabs — they need a fresh connection
+      if (tab.connection.status === "error" || tab.connection.status === "disconnected") return false;
+      return tabConnectionKeyMapRef.current.get(tab.id) === connectionKey;
+    });
+    if (existingTab) {
+      s.selectTab("left", existingTab.id);
+      connectedKeyRef.current = connectionKey;
+      connectedHostObjRef.current = activeHost;
+      return;
+    }
+
+    // Create a new tab when there's already an active connection to a different
+    // host, so the previous tab is preserved for instant switching on focus change.
+    const currentConn = s.leftPane.connection;
+    const needsNewTab = !!(currentConn && currentConn.status === "connected" && currentConn.hostId !== activeHost.id);
+
+    connectedKeyRef.current = connectionKey;
+    connectedHostObjRef.current = activeHost;
+    // Store the pending key so the effect below can map it once the tab is created
+    pendingConnectionKeyRef.current = connectionKey;
+    s.connect("left", activeHost, needsNewTab ? { forceNewTab: true } : undefined);
+  }, [activeHost, hasActiveWork]); // Re-evaluate when work finishes so deferred switch can proceed
+
+  // Track the active tab's connectionKey after connect() creates or reuses it.
+  // Watches both activeTabId (new tab) and connection status (reused tab reconnecting).
+  useEffect(() => {
+    const activeTabId = sftp.leftTabs.activeTabId;
+    if (activeTabId && pendingConnectionKeyRef.current) {
+      tabConnectionKeyMapRef.current.set(activeTabId, pendingConnectionKeyRef.current);
+      pendingConnectionKeyRef.current = null;
+    }
+  }, [sftp.leftTabs.activeTabId, sftp.leftPane.connection?.status]);
+
+  // Clear the remembered connection key when the pane disconnects or the
+  // session is lost, so re-opening SFTP for the same terminal reconnects.
+  // Also reset the file-watch counter — watches are bound to the SFTP session,
+  // so they stop when the session disconnects.
+  useEffect(() => {
+    const connection = sftp.leftPane.connection;
+    if (!connection || connection.status === "error" || connection.status === "disconnected") {
+      connectedKeyRef.current = null;
+      if (sftp.activeFileWatchCountRef) {
+        sftp.activeFileWatchCountRef.current = 0;
+      }
+    }
+  }, [sftp.leftPane.connection, sftp.leftPane.connection?.status, sftp.activeFileWatchCountRef]);
+
+  useEffect(() => {
+    if (!activeHost || !initialLocation) return;
+    if (initialLocation.hostId !== activeHost.id || !initialLocation.path) return;
+
+    const activePane = sftpRef.current.leftPane;
+    const connection = activePane.connection;
+    if (!connection || connection.isLocal || connection.hostId !== activeHost.id) return;
+    if (connection.status !== "connected") return;
+
+    // Include full endpoint key so that same-hostId sessions with
+    // different overrides each get their initial location applied.
+    const locationKey = `${connectedKeyRef.current}:${initialLocation.path}`;
+    if (lastAppliedInitialLocationKeyRef.current === locationKey) return;
+
+    if (connection.currentPath === initialLocation.path) {
+      lastAppliedInitialLocationKeyRef.current = locationKey;
+      return;
+    }
+
+    lastAppliedInitialLocationKeyRef.current = locationKey;
+    sftpRef.current.navigateTo("left", initialLocation.path);
+  }, [
+    activeHost,
+    initialLocation,
+    sftp.leftPane,
+  ]);
+
+  useEffect(() => {
+    if (!pendingUpload || !activeHost) return;
+    if (handledPendingUploadIdRef.current === pendingUpload.requestId) return;
+    if (pendingUpload.hostId !== activeHost.id) return;
+
+    const activePane = sftp.leftPane;
+    const connection = activePane.connection;
+    if (!connection || connection.isLocal || connection.hostId !== activeHost.id) return;
+    if (connection.status !== "connected") return;
+
+    handledPendingUploadIdRef.current = pendingUpload.requestId;
+
+    const runUpload = async () => {
+      try {
+        const results = await sftpRef.current.uploadExternalEntries("left", pendingUpload.entries, {
+          targetPath: pendingUpload.targetPath,
+        });
+        if (results.some((result) => result.cancelled)) {
+          toast.info(t("sftp.upload.cancelled"), "SFTP");
+          return;
+        }
+
+        const failCount = results.filter((result) => !result.success && !result.cancelled).length;
+        const successCount = results.filter((result) => result.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((result) => !result.success && !result.cancelled);
+          failedFiles.forEach((failed) => {
+            const errorMsg = failed.error ? ` - ${failed.error}` : "";
+            toast.error(
+              `${t("sftp.error.uploadFailed")}: ${failed.fileName}${errorMsg}`,
+              "SFTP",
+            );
+          });
+        }
+      } catch (error) {
+        logger.error("[SftpSidePanel] Failed to upload dropped files:", error);
+        handledPendingUploadIdRef.current = null;
+        toast.error(
+          error instanceof Error ? error.message : t("sftp.error.uploadFailed"),
+          "SFTP",
+        );
+        return;
+      } finally {
+        onPendingUploadHandled?.(pendingUpload.requestId);
+      }
+    };
+
+    void runUpload();
+  }, [
+    activeHost,
+    onPendingUploadHandled,
+    pendingUpload,
+    sftp.leftPane,
+    t,
+  ]);
+
+  const MAX_VISIBLE_TRANSFERS = 5;
+  const visibleTransfers = useMemo(
+    () => [...sftp.transfers].reverse().slice(0, MAX_VISIBLE_TRANSFERS),
+    [sftp.transfers],
+  );
+
+  const handleRevealTransferTarget = useCallback(
+    async (task: TransferTask) => {
+      const connection = sftpRef.current.leftPane.connection;
+      if (!connection || connection.isLocal) return;
+
+      const revealPath = task.isDirectory ? task.targetPath : getParentPath(task.targetPath);
+      await sftpRef.current.navigateTo("left", revealPath, { force: true });
+    },
+    [],
+  );
+
+  const canRevealTransferTarget = useCallback(
+    (task: TransferTask) => {
+      if (task.status !== "completed") return false;
+      if (task.direction !== "upload" && task.direction !== "remote-to-remote") return false;
+
+      const connection = sftp.leftPane.connection;
+      if (!connection || connection.isLocal) return false;
+
+      if (task.targetHostId) {
+        if (connection.hostId !== task.targetHostId) return false;
+        // If the transfer recorded a full endpoint key, use it to
+        // distinguish same-hostId uploads with different session overrides.
+        if (task.targetConnectionKey) {
+          return connectedKeyRef.current === task.targetConnectionKey;
+        }
+        return true;
+      }
+
+      return connection.id === task.targetConnectionId;
+    },
+    [sftp.leftPane.connection],
+  );
+
+  // When the auto-connect effect defers a switch (active transfers or open
+  // editor), the panel still operates on the current connection, not
+  // activeHost.  Use the connected host for the header so the label matches
+  // what browse/edit/delete actions actually target.
+  const displayHost = useMemo(() => {
+    const conn = sftp.leftPane.connection;
+    if (conn && !conn.isLocal) {
+      // Prefer the stored Host object from connect time — it preserves
+      // session-time overrides that the vault host may lack.
+      if (connectedHostObjRef.current && connectedHostObjRef.current.id === conn.hostId) {
+        return connectedHostObjRef.current;
+      }
+      return hosts.find((h) => h.id === conn.hostId) ?? activeHost;
+    }
+    return activeHost;
+  }, [sftp.leftPane.connection, hosts, activeHost]);
+
+  // Determine the active pane to render (without using global activeTabStore)
+  const activeLeftPaneId = sftp.leftTabs.activeTabId;
+
+  return (
+    <SftpContextProvider
+      hosts={hosts}
+      updateHosts={updateHosts}
+      draggedFiles={draggedFiles}
+      dragCallbacks={dragCallbacks}
+      leftCallbacks={leftCallbacks}
+      rightCallbacks={rightCallbacks}
+    >
+      <div
+        className="h-full flex flex-col bg-background overflow-hidden"
+        style={isVisible ? undefined : { display: "none" }}
+        aria-hidden={!isVisible}
+      >
+        {showWorkspaceHostHeader && displayHost && (
+          <div className="shrink-0 border-b border-border/50 bg-muted/20 px-3 py-1.5">
+            <div className="flex items-center gap-2 min-w-0">
+              <DistroAvatar
+                host={displayHost}
+                fallback={displayHost.label.slice(0, 2).toUpperCase()}
+                size="sm"
+                className="h-5 w-5 rounded-sm shrink-0"
+              />
+              <div
+                className="min-w-0 flex-1 max-w-[calc(100%-1.75rem)] text-[11px] leading-5 truncate"
+                title={`${displayHost.label} · ${(displayHost.username || "root")}@${displayHost.hostname}:${displayHost.port || 22}`}
+              >
+                <span className="font-medium">
+                  {displayHost.label}
+                </span>
+                <span className="mx-1 text-muted-foreground">·</span>
+                <span className="font-mono text-muted-foreground">
+                  {(displayHost.username || "root")}@{displayHost.hostname}:{displayHost.port || 22}
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+        {/* File browser pane - render only the active pane */}
+        <div className="relative flex-1 min-h-0">
+          {leftPanes.map((pane, idx) => {
+            // Manage visibility locally instead of via activeTabStore
+            const isActive = activeLeftPaneId
+              ? pane.id === activeLeftPaneId
+              : idx === 0;
+            if (!isActive) return null;
+
+            return (
+              <div key={pane.id} className="absolute inset-0 z-10">
+                <SftpPaneView
+                  side="left"
+                  pane={pane}
+                  showHeader
+                  showEmptyHeader
+                  onToggleShowHiddenFiles={() => handleToggleHiddenFiles(pane.id)}
+                  onGoToTerminalCwd={onGetTerminalCwd ? handleGoToTerminalCwd : undefined}
+                />
+              </div>
+            );
+          })}
+        </div>
+        <SftpTransferQueue
+          sftp={sftp}
+          visibleTransfers={visibleTransfers}
+          canRevealTransferTarget={canRevealTransferTarget}
+          onRevealTransferTarget={handleRevealTransferTarget}
+        />
+      </div>
+
+      {renderOverlays && (
+        <SftpOverlays
+          hosts={hosts}
+          sftp={sftp}
+          visibleTransfers={visibleTransfers}
+          showTransferQueue={false}
+          showHostPickerLeft={showHostPickerLeft}
+          showHostPickerRight={showHostPickerRight}
+          hostSearchLeft={hostSearchLeft}
+          hostSearchRight={hostSearchRight}
+          setShowHostPickerLeft={setShowHostPickerLeft}
+          setShowHostPickerRight={setShowHostPickerRight}
+          setHostSearchLeft={setHostSearchLeft}
+          setHostSearchRight={setHostSearchRight}
+          handleHostSelectLeft={handleHostSelectLeft}
+          handleHostSelectRight={handleHostSelectRight}
+          permissionsState={permissionsState}
+          setPermissionsState={setPermissionsState}
+          showTextEditor={showTextEditor}
+          setShowTextEditor={setShowTextEditor}
+          textEditorTarget={textEditorTarget}
+          setTextEditorTarget={setTextEditorTarget}
+          textEditorContent={textEditorContent}
+          setTextEditorContent={setTextEditorContent}
+          handleSaveTextFile={handleSaveTextFile}
+          editorWordWrap={editorWordWrap}
+          setEditorWordWrap={setEditorWordWrap}
+          showFileOpenerDialog={showFileOpenerDialog}
+          setShowFileOpenerDialog={setShowFileOpenerDialog}
+          fileOpenerTarget={fileOpenerTarget}
+          setFileOpenerTarget={setFileOpenerTarget}
+          handleFileOpenerSelect={handleFileOpenerSelect}
+          handleSelectSystemApp={handleSelectSystemApp}
+          t={t}
+        />
+      )}
+    </SftpContextProvider>
+  );
+};
+
+const sidePanelAreEqual = (prev: SftpSidePanelProps, next: SftpSidePanelProps): boolean =>
+  prev.hosts === next.hosts &&
+  prev.keys === next.keys &&
+  prev.identities === next.identities &&
+  prev.updateHosts === next.updateHosts &&
+  prev.activeHost === next.activeHost &&
+  prev.showWorkspaceHostHeader === next.showWorkspaceHostHeader &&
+  prev.isVisible === next.isVisible &&
+  prev.renderOverlays === next.renderOverlays &&
+  prev.pendingUpload?.requestId === next.pendingUpload?.requestId &&
+  prev.onPendingUploadHandled === next.onPendingUploadHandled &&
+  prev.sftpDoubleClickBehavior === next.sftpDoubleClickBehavior &&
+  prev.sftpAutoSync === next.sftpAutoSync &&
+  prev.sftpShowHiddenFiles === next.sftpShowHiddenFiles &&
+  prev.sftpUseCompressedUpload === next.sftpUseCompressedUpload &&
+  prev.editorWordWrap === next.editorWordWrap &&
+  prev.setEditorWordWrap === next.setEditorWordWrap &&
+  prev.onGetTerminalCwd === next.onGetTerminalCwd &&
+  prev.initialLocation?.hostId === next.initialLocation?.hostId &&
+  prev.initialLocation?.path === next.initialLocation?.path;
+
+export const SftpSidePanel = memo(SftpSidePanelInner, sidePanelAreEqual);
+SftpSidePanel.displayName = "SftpSidePanel";

components/SftpView.tsx

@@ -81,7 +81,8 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
   const sftpOptions = useMemo(() => ({
     ...fileWatchHandlers,
     useCompressedUpload: sftpUseCompressedUpload,
-  }), [fileWatchHandlers, sftpUseCompressedUpload]);
+    defaultShowHiddenFiles: sftpShowHiddenFiles,
+  }), [fileWatchHandlers, sftpUseCompressedUpload, sftpShowHiddenFiles]);
 
   const sftp = useSftpState(hosts, keys, identities, sftpOptions);
 
@@ -107,7 +108,6 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
     hotkeyScheme,
     sftpRef,
     isActive,
-    showHiddenFiles: sftpShowHiddenFiles,
   });
 
   // Subscribe to focused side for visual indicator
@@ -118,6 +118,14 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
     sftpFocusStore.setFocusedSide(side);
   }, []);
 
+  const handleToggleHiddenFiles = useCallback((side: "left" | "right", paneId: string) => {
+    const sideTabs = side === "left" ? sftpRef.current.leftTabs : sftpRef.current.rightTabs;
+    const pane = sideTabs.tabs.find((tab) => tab.id === paneId);
+    if (!pane) return;
+
+    sftpRef.current.setShowHiddenFiles(side, paneId, !pane.showHiddenFiles);
+  }, []);
+
   // Sync activeTabId to external store (allows child components to subscribe without parent re-render)
   // Using useLayoutEffect to sync before paint
   useLayoutEffect(() => {
@@ -225,7 +233,6 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
       dragCallbacks={dragCallbacks}
       leftCallbacks={leftCallbacks}
       rightCallbacks={rightCallbacks}
-      showHiddenFiles={sftpShowHiddenFiles}
     >
       <div
         className={cn(
@@ -277,6 +284,7 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
                     pane={pane}
                     showHeader
                     showEmptyHeader={false}
+                    onToggleShowHiddenFiles={() => handleToggleHiddenFiles("left", pane.id)}
                   />
                 </SftpPaneWrapper>
               ))}
@@ -333,6 +341,7 @@ const SftpViewInner: React.FC<SftpViewProps> = ({ hosts, keys, identities, updat
                     pane={pane}
                     showHeader
                     showEmptyHeader={false}
+                    onToggleShowHiddenFiles={() => handleToggleHiddenFiles("right", pane.id)}
                   />
                 </SftpPaneWrapper>
               ))}

components/SyncStatusButton.tsx

@@ -25,7 +25,7 @@ import {
     Server,
 } from 'lucide-react';
 import { useCloudSync } from '../application/state/useCloudSync';
-import type { CloudProvider } from '../domain/sync';
+import { isProviderReadyForSync, type CloudProvider } from '../domain/sync';
 import { useI18n } from '../application/i18n/I18nProvider';
 import { cn } from '../lib/utils';
 import { Button } from './ui/button';
@@ -122,12 +122,11 @@ export const SyncStatusButton: React.FC<SyncStatusButtonProps> = ({
 
     // Get connected provider (include syncing status as it's still connected)
     const getConnectedProvider = (): CloudProvider | null => {
-        const isProviderActive = (status: string) => status === 'connected' || status === 'syncing';
-        if (isProviderActive(sync.providers.github.status)) return 'github';
-        if (isProviderActive(sync.providers.google.status)) return 'google';
-        if (isProviderActive(sync.providers.onedrive.status)) return 'onedrive';
-        if (isProviderActive(sync.providers.webdav.status)) return 'webdav';
-        if (isProviderActive(sync.providers.s3.status)) return 's3';
+        if (isProviderReadyForSync(sync.providers.github)) return 'github';
+        if (isProviderReadyForSync(sync.providers.google)) return 'google';
+        if (isProviderReadyForSync(sync.providers.onedrive)) return 'onedrive';
+        if (isProviderReadyForSync(sync.providers.webdav)) return 'webdav';
+        if (isProviderReadyForSync(sync.providers.s3)) return 's3';
         return null;
     };
 
@@ -136,9 +135,9 @@ export const SyncStatusButton: React.FC<SyncStatusButtonProps> = ({
 
     // Determine overall status for the button indicator
     const getOverallStatus = (): StatusIndicatorProps['status'] => {
-        if (sync.isSyncing) return 'syncing';
-        if (sync.lastError) return 'error';
-        if (sync.hasAnyConnectedProvider) return 'synced';
+        if (sync.overallSyncStatus === 'syncing') return 'syncing';
+        if (sync.overallSyncStatus === 'error' || sync.overallSyncStatus === 'conflict') return 'error';
+        if (sync.overallSyncStatus === 'synced') return 'synced';
         return 'none';
     };
 

components/Terminal.tsx

@@ -5,7 +5,7 @@ import { SearchAddon } from "@xterm/addon-search";
 import "@xterm/xterm/css/xterm.css";
 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";
+// flushSync removed - no longer needed
 import { useI18n } from "../application/i18n/I18nProvider";
 import { logger } from "../lib/logger";
 import { cn } from "../lib/utils";
@@ -21,10 +21,14 @@ import {
   TerminalSettings,
   KeyBinding,
 } from "../types";
+import {
+  shouldEnableNativeUserInputAutoScroll,
+  shouldScrollOnTerminalInput,
+} from "../domain/terminalScroll";
 import { resolveHostAuth } from "../domain/sshAuth";
 import { useTerminalBackend } from "../application/state/useTerminalBackend";
 import KnownHostConfirmDialog, { HostKeyInfo } from "./KnownHostConfirmDialog";
-import SFTPModal from "./SFTPModal";
+// SFTPModal removed - SFTP is now handled by SftpSidePanel in TerminalLayer
 import { Button } from "./ui/button";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "./ui/hover-card";
 import { toast } from "./ui/toast";
@@ -115,9 +119,6 @@ interface TerminalProps {
   sessionId: string;
   startupCommand?: string;
   serialConfig?: SerialConfig;
-  onUpdateTerminalThemeId?: (themeId: string) => void;
-  onUpdateTerminalFontFamilyId?: (fontFamilyId: string) => void;
-  onUpdateTerminalFontSize?: (fontSize: number) => void;
   hotkeyScheme?: "disabled" | "mac" | "pc";
   keyBindings?: KeyBinding[];
   onHotkeyAction?: (action: string, event: KeyboardEvent) => void;
@@ -137,6 +138,14 @@ interface TerminalProps {
   ) => void;
   onSplitHorizontal?: () => void;
   onSplitVertical?: () => void;
+  onOpenSftp?: (
+    host: Host,
+    initialPath?: string,
+    pendingUploadEntries?: DropEntry[],
+    sourceSessionId?: string,
+  ) => void;
+  onOpenScripts?: () => void;
+  onOpenTheme?: () => void;
   isBroadcastEnabled?: boolean;
   onToggleBroadcast?: () => void;
   onToggleComposeBar?: () => void;
@@ -176,9 +185,6 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   sessionId,
   startupCommand,
   serialConfig,
-  onUpdateTerminalThemeId,
-  onUpdateTerminalFontFamilyId,
-  onUpdateTerminalFontSize,
   hotkeyScheme = "disabled",
   keyBindings = [],
   onHotkeyAction,
@@ -193,6 +199,9 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   onCommandExecuted,
   onSplitHorizontal,
   onSplitVertical,
+  onOpenSftp,
+  onOpenScripts,
+  onOpenTheme,
   isBroadcastEnabled,
   onToggleBroadcast,
   onToggleComposeBar,
@@ -215,10 +224,16 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const hasConnectedRef = useRef(false);
   const hasRunStartupCommandRef = useRef(false);
   const commandBufferRef = useRef<string>("");
+  const [hasMouseTracking, setHasMouseTracking] = useState(false);
+  const mouseTrackingRef = useRef(false);
   const serialLineBufferRef = useRef<string>("");
 
   const terminalSettingsRef = useRef(terminalSettings);
   terminalSettingsRef.current = terminalSettings;
+  const isVisibleRef = useRef(isVisible);
+  isVisibleRef.current = isVisible;
+  const pendingOutputScrollRef = useRef(false);
+  const lastFittedSizeRef = useRef<{ width: number; height: number } | null>(null);
 
   useEffect(() => {
     if (xtermRuntimeRef.current) {
@@ -270,7 +285,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
 
 
 
-  const [isScriptsOpen, setIsScriptsOpen] = useState(false);
+  // isScriptsOpen state removed - scripts now handled by side panel
   const [status, setStatus] = useState<TerminalSession["status"]>("connecting");
   const [error, setError] = useState<string | null>(null);
   const lastToastedErrorRef = useRef<string | null>(null);
@@ -279,7 +294,6 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const [timeLeft, setTimeLeft] = useState(CONNECTION_TIMEOUT / 1000);
   const [isCancelling, setIsCancelling] = useState(false);
   const [showSFTP, setShowSFTP] = useState(false);
-  const [sftpInitialPath, setSftpInitialPath] = useState<string | undefined>(undefined);
   const [progressValue, setProgressValue] = useState(15);
   const [hasSelection, setHasSelection] = useState(false);
 
@@ -295,7 +309,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   // Drag and drop state
   const [isDraggingOver, setIsDraggingOver] = useState(false);
   const dragCounterRef = useRef(0);
-  const [pendingUploadEntries, setPendingUploadEntries] = useState<DropEntry[]>([]);
+  // pendingUploadEntries removed - drag-drop uploads now handled by SftpSidePanel
   const [isComposeBarOpen, setIsComposeBarOpen] = useState(false);
   const [terminalEncoding, setTerminalEncoding] = useState<'utf-8' | 'gb18030'>(() => {
     if (host?.charset && /^gb/i.test(String(host.charset).trim())) return 'gb18030';
@@ -414,8 +428,11 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     sessionId,
     startupCommand,
     terminalSettings,
+    terminalSettingsRef,
     terminalBackend,
     serialConfig,
+    isVisibleRef,
+    pendingOutputScrollRef,
     sessionRef,
     hasConnectedRef,
     hasRunStartupCommandRef,
@@ -452,6 +469,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     let disposed = false;
     setError(null);
     hasConnectedRef.current = false;
+    pendingOutputScrollRef.current = false;
     setProgressLogs([]);
     setShowLogs(false);
     setIsCancelling(false);
@@ -629,12 +647,34 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps -- updateStatus is a stable internal helper
   }, [status, auth.needsAuth, host.protocol, host.hostname]);
 
-  const safeFit = () => {
+  const safeFit = (options?: { force?: boolean; requireVisible?: boolean }) => {
     const fitAddon = fitAddonRef.current;
     if (!fitAddon) return;
+    if (options?.requireVisible && !isVisibleRef.current) return;
+
+    const container = containerRef.current;
+    if (!container) return;
+
+    const width = container.clientWidth;
+    const height = container.clientHeight;
+    if (width <= 0 || height <= 0) {
+      // Terminal is hidden — invalidate the cached size so that when it
+      // becomes visible again, a non-forced fit won't be suppressed by a
+      // stale size match (e.g. after font metrics changed while hidden).
+      lastFittedSizeRef.current = null;
+      return;
+    }
+
+    if (!options?.force) {
+      const lastSize = lastFittedSizeRef.current;
+      if (lastSize && lastSize.width === width && lastSize.height === height) {
+        return;
+      }
+    }
 
     const runFit = () => {
       try {
+        lastFittedSizeRef.current = { width, height };
         fitAddon.fit();
       } catch (err) {
         logger.warn("Fit failed", err);
@@ -701,13 +741,14 @@ const TerminalComponent: React.FC<TerminalProps> = ({
           terminalSettings.drawBoldInBrightColors;
         termRef.current.options.minimumContrastRatio =
           terminalSettings.minimumContrastRatio;
-        termRef.current.options.scrollOnUserInput = terminalSettings.scrollOnInput;
+        termRef.current.options.scrollOnUserInput =
+          shouldEnableNativeUserInputAutoScroll(terminalSettings);
         termRef.current.options.altClickMovesCursor = !terminalSettings.altAsMeta;
         termRef.current.options.wordSeparator = terminalSettings.wordSeparators;
         termRef.current.options.ignoreBracketedPasteMode = terminalSettings.disableBracketedPaste ?? false;
       }
 
-      setTimeout(() => safeFit(), 50);
+      setTimeout(() => safeFit({ force: true }), 50);
     }
   }, [fontSize, effectiveTheme, terminalSettings, host.fontSize]);
 
@@ -725,15 +766,25 @@ const TerminalComponent: React.FC<TerminalProps> = ({
         selectionBackground: effectiveTheme.colors.selection,
       };
 
-      setTimeout(() => safeFit(), 50);
+      setTimeout(() => safeFit({ force: true }), 50);
     }
   }, [host.fontSize, host.fontFamily, host.theme, fontFamilyId, fontSize, effectiveTheme, availableFonts]);
 
   useEffect(() => {
-    if (isVisible && fitAddonRef.current) {
-      const timer = setTimeout(() => safeFit(), 50);
-      return () => clearTimeout(timer);
-    }
+    if (!isVisible) return;
+    const timer = setTimeout(() => {
+      safeFit({ requireVisible: true });
+      if (pendingOutputScrollRef.current) {
+        termRef.current?.scrollToBottom();
+        if (typeof requestAnimationFrame === "function") {
+          requestAnimationFrame(() => {
+            termRef.current?.scrollToBottom();
+          });
+        }
+        pendingOutputScrollRef.current = false;
+      }
+    }, 50);
+    return () => clearTimeout(timer);
   }, [isVisible]);
 
   useEffect(() => {
@@ -804,17 +855,17 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   }, [host.id, host.fontFamily, host.fontSize, fontFamilyId, fontSize, resizeSession, sessionId, terminalSettings]);
 
   useEffect(() => {
-    if (!containerRef.current || !fitAddonRef.current) return;
+    if (!isVisible || !containerRef.current || !fitAddonRef.current) return;
 
     let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
 
     const observer = new ResizeObserver(() => {
-      if (isResizing) return;
+      if (isResizing || !isVisibleRef.current) return;
       if (resizeTimeout) {
         clearTimeout(resizeTimeout);
       }
       resizeTimeout = setTimeout(() => {
-        safeFit();
+        safeFit({ requireVisible: true });
       }, 250);
     });
 
@@ -829,7 +880,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   useEffect(() => {
     if (prevIsResizingRef.current && !isResizing && isVisible) {
       const timer = setTimeout(() => {
-        safeFit();
+        safeFit({ force: true, requireVisible: true });
       }, 100);
       return () => clearTimeout(timer);
     }
@@ -839,7 +890,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   useEffect(() => {
     if (!isVisible || !fitAddonRef.current) return;
     const timer = setTimeout(() => {
-      safeFit();
+      safeFit({ requireVisible: true });
     }, 100);
     return () => clearTimeout(timer);
   }, [inWorkspace, isVisible]);
@@ -879,18 +930,75 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       }
     };
 
-    term.onSelectionChange(onSelectionChange);
+    const disposable = term.onSelectionChange(onSelectionChange);
+    return () => disposable.dispose();
   }, [terminalSettings?.copyOnSelect]);
 
+  // Track whether the terminal application has enabled mouse tracking
+  // (e.g. tmux with `set -g mouse on`, vim with `set mouse=a`).
+  // When mouse tracking is active, disable Netcatty's context menu to avoid
+  // conflicting with the application's own mouse handling.
+  useEffect(() => {
+    const term = termRef.current;
+    if (!term) return;
+
+    const disposable = term.onWriteParsed(() => {
+      const tracking = term.modes.mouseTrackingMode !== 'none';
+      if (tracking !== mouseTrackingRef.current) {
+        mouseTrackingRef.current = tracking;
+        setHasMouseTracking(tracking);
+      }
+    });
+
+    // Set initial state
+    const initial = term.modes.mouseTrackingMode !== 'none';
+    mouseTrackingRef.current = initial;
+    setHasMouseTracking(initial);
+
+    return () => disposable.dispose();
+  }, [sessionId]);
+
+  // Prevent xterm.js's built-in rightClickHandler and right-button mouseup
+  // from interfering with tmux/vim popup menus when mouse tracking is active.
+  // - contextmenu: xterm.js calls textarea.select() which steals focus
+  // - mouseup (button 2): tmux interprets the right-button release as a
+  //   dismiss action, closing the popup menu immediately after it appears
+  // Both are intercepted at the capture phase before xterm.js's own listeners.
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const handleContextMenuCapture = (e: MouseEvent) => {
+      if (mouseTrackingRef.current) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
+    };
+
+    const handleMouseUpCapture = (e: MouseEvent) => {
+      if (e.button === 2 && mouseTrackingRef.current) {
+        e.stopImmediatePropagation();
+      }
+    };
+
+    el.addEventListener('contextmenu', handleContextMenuCapture, true);
+    el.addEventListener('mouseup', handleMouseUpCapture, true);
+    return () => {
+      el.removeEventListener('contextmenu', handleContextMenuCapture, true);
+      el.removeEventListener('mouseup', handleMouseUpCapture, true);
+    };
+  }, [sessionId]);
+
   useEffect(() => {
     let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
 
     const handler = () => {
+      if (!isVisibleRef.current) return;
       if (resizeTimeout) {
         clearTimeout(resizeTimeout);
       }
       resizeTimeout = setTimeout(() => {
-        safeFit();
+        safeFit({ requireVisible: true });
       }, 250);
     };
 
@@ -904,24 +1012,24 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const disableBracketedPasteRef = useRef(terminalSettings?.disableBracketedPaste ?? false);
   disableBracketedPasteRef.current = terminalSettings?.disableBracketedPaste ?? false;
 
+  const scrollOnPasteRef = useRef(terminalSettings?.scrollOnPaste ?? true);
+  scrollOnPasteRef.current = terminalSettings?.scrollOnPaste ?? true;
+
+  const scrollToBottomAfterProgrammaticInput = (data: string) => {
+    if (termRef.current && shouldScrollOnTerminalInput(terminalSettingsRef.current, data)) {
+      termRef.current.scrollToBottom();
+    }
+  };
+
   const terminalContextActions = useTerminalContextActions({
     termRef,
     sessionRef,
     terminalBackend,
     onHasSelectionChange: setHasSelection,
     disableBracketedPasteRef,
+    scrollOnPasteRef,
   });
 
-  const handleSnippetClick = (cmd: string) => {
-    if (sessionRef.current) {
-      terminalBackend.writeToSession(sessionRef.current, `${cmd}\r`);
-      setIsScriptsOpen(false);
-      termRef.current?.focus();
-      return;
-    }
-    termRef.current?.writeln("\r\n[No active SSH session]");
-  };
-
   const handleSetTerminalEncoding = (encoding: 'utf-8' | 'gb18030') => {
     setTerminalEncoding(encoding);
     if (sessionRef.current) {
@@ -930,30 +1038,28 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   };
 
   const handleOpenSFTP = async () => {
-    // If SFTP is already open, toggle it off
+    if (onOpenSftp) {
+      // Delegate to parent (TerminalLayer) for shared SFTP side panel
+      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
+        }
+      }
+      onOpenSftp(host, initialPath, undefined, sessionId);
+      return;
+    }
+
+    // Fallback: toggle internal SFTP state (shouldn't happen with new architecture)
     if (showSFTP) {
       setShowSFTP(false);
       return;
     }
-
-    // Try to get the current working directory from the terminal session
-    let initialPath: string | undefined = undefined;
-    if (sessionRef.current) {
-      try {
-        const result = await terminalBackend.getSessionPwd(sessionRef.current);
-        if (result.success && result.cwd) {
-          initialPath = result.cwd;
-        }
-      } catch {
-        // Silently fail and open SFTP without initial path
-      }
-    }
-
-    // Use flushSync to ensure initialPath state is committed before opening SFTP modal
-    // This prevents React's batching from causing the modal to open with stale/undefined initialPath
-    flushSync(() => {
-      setSftpInitialPath(initialPath);
-    });
     setShowSFTP(true);
   };
 
@@ -1011,6 +1117,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
     if (!termRef.current) return;
     cleanupSession();
     auth.resetForRetry();
+    hasRunStartupCommandRef.current = false;
     setStatus("connecting");
     setError(null);
     setProgressLogs(["Retrying secure channel..."]);
@@ -1080,30 +1187,25 @@ const TerminalComponent: React.FC<TerminalProps> = ({
           const pathsText = paths.join(' ');
           // Write the paths to the terminal
           terminalBackend.writeToSession(sessionRef.current, pathsText);
+          scrollToBottomAfterProgrammaticInput(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;
+        // Remote terminal: Trigger SFTP upload via parent
+        if (onOpenSftp) {
+          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
             }
-          } catch {
-            // Silently fail and open SFTP without initial path
           }
+          onOpenSftp(host, initialPath, dropEntries, sessionId);
         }
-
-        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);
@@ -1114,18 +1216,10 @@ const TerminalComponent: React.FC<TerminalProps> = ({
   const renderControls = (opts?: { showClose?: boolean }) => (
     <TerminalToolbar
       status={status}
-      snippets={snippets}
       host={host}
-      defaultThemeId={terminalTheme.id}
-      defaultFontFamilyId={fontFamilyId}
-      defaultFontSize={fontSize}
-      onUpdateTerminalThemeId={onUpdateTerminalThemeId}
-      onUpdateTerminalFontFamilyId={onUpdateTerminalFontFamilyId}
-      onUpdateTerminalFontSize={onUpdateTerminalFontSize}
-      isScriptsOpen={isScriptsOpen}
-      setIsScriptsOpen={setIsScriptsOpen}
       onOpenSFTP={handleOpenSFTP}
-      onSnippetClick={handleSnippetClick}
+      onOpenScripts={onOpenScripts ?? (() => {})}
+      onOpenTheme={onOpenTheme ?? (() => {})}
       onUpdateHost={onUpdateHost}
       showClose={opts?.showClose}
       onClose={() => onCloseSession?.(sessionId)}
@@ -1144,8 +1238,6 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       : status === "connecting"
         ? "bg-amber-400"
         : "bg-rose-500";
-  const _isConnecting = status === "connecting";
-  const _hasError = Boolean(error);
 
   return (
     <TerminalContextMenu
@@ -1153,6 +1245,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
       hotkeyScheme={hotkeyScheme}
       keyBindings={keyBindings}
       rightClickBehavior={terminalSettings?.rightClickBehavior}
+      isAlternateScreen={hasMouseTracking}
       onCopy={terminalContextActions.onCopy}
       onPaste={terminalContextActions.onPaste}
       onSelectAll={terminalContextActions.onSelectAll}
@@ -1560,7 +1653,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
         </div>
 
         <div
-          className="h-full flex-1 min-w-0 transition-all duration-300 relative overflow-hidden pt-8"
+          className="h-full flex-1 min-w-0 relative overflow-hidden pt-8"
           style={{ backgroundColor: effectiveTheme.colors.background }}
         >
           <div
@@ -1638,6 +1731,7 @@ const TerminalComponent: React.FC<TerminalProps> = ({
               if (sessionRef.current) {
                 const payload = text + '\r';
                 terminalBackend.writeToSession(sessionRef.current, payload);
+                scrollToBottomAfterProgrammaticInput(payload);
                 onBroadcastInput?.(payload, sessionRef.current);
               }
             }}
@@ -1649,78 +1743,6 @@ const TerminalComponent: React.FC<TerminalProps> = ({
             themeColors={effectiveTheme.colors}
           />
         )}
-
-        <SFTPModal
-          host={host}
-          credentials={(() => {
-            const resolvedAuth = resolveHostAuth({ host, keys, identities });
-
-            // Build proxy config if present
-            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;
-
-            // Build jump hosts array if host chain is configured
-            let jumpHosts: NetcattyJumpHost[] | undefined;
-            if (host.hostChain?.hostIds && host.hostChain.hostIds.length > 0) {
-              jumpHosts = host.hostChain.hostIds
-                .map((hostId) => allHosts.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 {
-              username: resolvedAuth.username,
-              hostname: host.hostname,
-              port: host.port,
-              password: resolvedAuth.password,
-              privateKey: resolvedAuth.key?.privateKey,
-              certificate: resolvedAuth.key?.certificate,
-              passphrase: resolvedAuth.passphrase,
-              publicKey: resolvedAuth.key?.publicKey,
-              keyId: resolvedAuth.keyId,
-              keySource: resolvedAuth.key?.source,
-              proxy: proxyConfig,
-              jumpHosts: jumpHosts && jumpHosts.length > 0 ? jumpHosts : undefined,
-              sftpSudo: host.sftpSudo,
-              legacyAlgorithms: host.legacyAlgorithms,
-            };
-          })()}
-          open={showSFTP && status === "connected"}
-          onClose={() => {
-            setShowSFTP(false);
-            setPendingUploadEntries([]);
-          }}
-          initialPath={sftpInitialPath}
-          initialEntriesToUpload={pendingUploadEntries}
-          onUpdateHost={onUpdateHost}
-        />
       </div>
     </TerminalContextMenu>
   );

components/TerminalLayer.tsx

@@ -1,4 +1,4 @@
-import { Circle, LayoutGrid, Server } from 'lucide-react';
+import { Circle, FolderTree, LayoutGrid, PanelLeft, PanelRight, Palette, Server, X, Zap } from 'lucide-react';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useActiveTabId } from '../application/state/activeTabStore';
 import { useTerminalBackend } from '../application/state/useTerminalBackend';
@@ -6,15 +6,23 @@ import { collectSessionIds } from '../domain/workspace';
 import { SplitDirection } from '../domain/workspace';
 import { KeyBinding, TerminalSettings } from '../domain/models';
 import { cn } from '../lib/utils';
+import { useStoredString } from '../application/state/useStoredString';
+import { buildCacheKey } from '../application/state/sftp/sharedRemoteHostCache';
+import type { DropEntry } from '../lib/sftpFileUtils';
 import { Host, Identity, KnownHost, SSHKey, Snippet, TerminalSession, TerminalTheme, Workspace, WorkspaceNode } from '../types';
 import { DistroAvatar } from './DistroAvatar';
 import Terminal from './Terminal';
+import { SftpSidePanel } from './SftpSidePanel';
+import { ScriptsSidePanel } from './ScriptsSidePanel';
+import { ThemeSidePanel } from './terminal/ThemeSidePanel';
 import { TerminalComposeBar } from './terminal/TerminalComposeBar';
 import { TERMINAL_THEMES } from '../infrastructure/config/terminalThemes';
 import { useCustomThemes } from '../application/state/customThemeStore';
 import { Button } from './ui/button';
 import { ScrollArea } from './ui/scroll-area';
 
+type SidePanelTab = 'sftp' | 'scripts' | 'theme';
+
 type WorkspaceRect = { x: number; y: number; w: number; h: number };
 
 type SplitHint = {
@@ -33,11 +41,34 @@ type ResizerHandle = {
   splitArea: { w: number; h: number };
 };
 
+type PendingSftpUpload = {
+  requestId: string;
+  hostId: string;
+  /** Full connection identity (id:hostname:port:protocol) for session-override awareness */
+  connectionKey: string;
+  targetPath?: string;
+  entries: DropEntry[];
+};
+
+const filterTabsMap = <T,>(source: Map<string, T>, validIds: Set<string>): Map<string, T> => {
+  let changed = false;
+  const next = new Map<string, T>();
+  for (const [id, value] of source) {
+    if (validIds.has(id)) {
+      next.set(id, value);
+    } else {
+      changed = true;
+    }
+  }
+  return changed ? next : source;
+};
+
 interface TerminalLayerProps {
   hosts: Host[];
   keys: SSHKey[];
   identities: Identity[];
   snippets: Snippet[];
+  snippetPackages: string[];
   sessions: TerminalSession[];
   workspaces: Workspace[];
   knownHosts?: KnownHost[];
@@ -69,6 +100,14 @@ interface TerminalLayerProps {
   // Broadcast mode
   isBroadcastEnabled?: (workspaceId: string) => boolean;
   onToggleBroadcast?: (workspaceId: string) => void;
+  // SFTP side panel
+  updateHosts: (hosts: Host[]) => void;
+  sftpDoubleClickBehavior: 'open' | 'transfer';
+  sftpAutoSync: boolean;
+  sftpShowHiddenFiles: boolean;
+  sftpUseCompressedUpload: boolean;
+  editorWordWrap: boolean;
+  setEditorWordWrap: (value: boolean) => void;
 }
 
 const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
@@ -76,6 +115,7 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
   keys,
   identities,
   snippets,
+  snippetPackages,
   sessions,
   workspaces,
   knownHosts = [],
@@ -106,6 +146,13 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
   onSplitSession,
   isBroadcastEnabled,
   onToggleBroadcast,
+  updateHosts,
+  sftpDoubleClickBehavior,
+  sftpAutoSync,
+  sftpShowHiddenFiles,
+  sftpUseCompressedUpload,
+  editorWordWrap,
+  setEditorWordWrap,
 }) => {
   // Subscribe to activeTabId from external store
   const activeTabId = useActiveTabId();
@@ -184,6 +231,161 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
 
   // Workspace-level compose bar state
   const [isComposeBarOpen, setIsComposeBarOpen] = useState(false);
+  const activeTabIdRef = useRef(activeTabId);
+  activeTabIdRef.current = activeTabId;
+  const activeWorkspaceRef = useRef(activeWorkspace);
+  activeWorkspaceRef.current = activeWorkspace;
+  const onSetWorkspaceFocusedSessionRef = useRef(onSetWorkspaceFocusedSession);
+  onSetWorkspaceFocusedSessionRef.current = onSetWorkspaceFocusedSession;
+
+  // Side panel state - per-tab tracking of which sub-panel is active
+  // Maps tab IDs to the active sub-panel type (sftp/scripts/theme), absent = closed
+  const [sidePanelOpenTabs, setSidePanelOpenTabs] = useState<Map<string, SidePanelTab>>(new Map());
+  const [sidePanelWidth, setSidePanelWidth] = useState(320);
+  const [sidePanelPosition, setSidePanelPosition] = useStoredString<'left' | 'right'>(
+    'netcatty_side_panel_position',
+    'left',
+    (v): v is 'left' | 'right' => v === 'left' || v === 'right',
+  );
+  const sftpResizingRef = useRef(false);
+  const sidePanelOpenTabsRef = useRef(sidePanelOpenTabs);
+  sidePanelOpenTabsRef.current = sidePanelOpenTabs;
+
+  // Whether side panel is open for the currently active tab and which sub-panel
+  const isSidePanelOpenForCurrentTab = activeTabId ? sidePanelOpenTabs.has(activeTabId) : false;
+  const activeSidePanelTab = activeTabId ? sidePanelOpenTabs.get(activeTabId) ?? null : null;
+
+  // Legacy compatibility helpers for SFTP-specific logic
+  const isSftpOpenForCurrentTab = activeSidePanelTab === 'sftp';
+
+  // The host to pass to the SFTP panel - stored when the user opens SFTP
+  const [sftpHostForTab, setSftpHostForTab] = useState<Map<string, Host>>(new Map());
+  const [sftpInitialLocationForTab, setSftpInitialLocationForTab] = useState<
+    Map<string, { hostId: string; path: string }>
+  >(new Map());
+  const [sftpPendingUploadsForTab, setSftpPendingUploadsForTab] = useState<
+    Map<string, PendingSftpUpload>
+  >(new Map());
+  const sftpHostForTabRef = useRef(sftpHostForTab);
+  sftpHostForTabRef.current = sftpHostForTab;
+
+  const handleToggleWorkspaceComposeBar = useCallback(() => {
+    setIsComposeBarOpen(prev => !prev);
+  }, []);
+
+  const handleOpenSftp = useCallback((host: Host, initialPath?: string, pendingUploadEntries?: DropEntry[], sourceSessionId?: string) => {
+    const tabId = activeTabIdRef.current;
+    if (!tabId) return;
+
+    // When SFTP is opened from a non-focused workspace pane (toolbar click
+    // or drag-drop), switch focus first so the SFTP panel binds to the
+    // correct host.
+    if (sourceSessionId) {
+      const ws = activeWorkspaceRef.current;
+      if (ws && ws.focusedSessionId !== sourceSessionId) {
+        onSetWorkspaceFocusedSessionRef.current?.(ws.id, sourceSessionId);
+      }
+    }
+
+    const currentPanel = sidePanelOpenTabsRef.current.get(tabId);
+    const isOpen = currentPanel === 'sftp';
+    const currentHost = sftpHostForTabRef.current.get(tabId);
+    const shouldKeepOpen = !!pendingUploadEntries?.length;
+    // Compare full endpoint identity so that session-time overrides
+    // (different port/protocol for the same host ID) trigger a switch
+    // instead of toggling the panel closed.
+    const isSameEndpoint = currentHost
+      && currentHost.id === host.id
+      && currentHost.hostname === host.hostname
+      && currentHost.port === host.port
+      && currentHost.protocol === host.protocol
+      && currentHost.username === host.username
+      && currentHost.sftpSudo === host.sftpSudo;
+
+    const isClosing = !shouldKeepOpen && isOpen && isSameEndpoint;
+
+    setSidePanelOpenTabs(prev => {
+      const next = new Map(prev);
+      if (isClosing) {
+        next.delete(tabId);
+      } else {
+        next.set(tabId, 'sftp');
+      }
+      return next;
+    });
+
+    // Store or remove the host for this tab.
+    // Removing on close unmounts the panel so SFTP sessions are cleaned up.
+    setSftpHostForTab(prev => {
+      const next = new Map(prev);
+      if (isClosing) {
+        next.delete(tabId);
+      } else {
+        next.set(tabId, host);
+      }
+      return next;
+    });
+
+    setSftpInitialLocationForTab(prev => {
+      const next = new Map(prev);
+      if (initialPath) {
+        next.set(tabId, { hostId: host.id, path: initialPath });
+      } else {
+        next.delete(tabId);
+      }
+      return next;
+    });
+
+    setSftpPendingUploadsForTab(prev => {
+      const next = new Map(prev);
+      if (isClosing || !pendingUploadEntries?.length) {
+        // Clear any stale pending upload on close or when opening without new files
+        next.delete(tabId);
+      } else {
+        next.set(tabId, {
+          requestId: crypto.randomUUID(),
+          hostId: host.id,
+          connectionKey: buildCacheKey(host.id, host.hostname, host.port, host.protocol, host.sftpSudo, host.username),
+          targetPath: initialPath,
+          entries: pendingUploadEntries,
+        });
+      }
+      return next;
+    });
+  }, []);
+
+  const handlePendingUploadHandled = useCallback((tabId: string, requestId: string) => {
+    setSftpPendingUploadsForTab(prev => {
+      const current = prev.get(tabId);
+      if (!current || current.requestId !== requestId) {
+        return prev;
+      }
+      const next = new Map(prev);
+      next.delete(tabId);
+      return next;
+    });
+  }, []);
+
+  // Side panel resize handler
+  const handleSidePanelResizeStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    sftpResizingRef.current = true;
+    const startX = e.clientX;
+    const startWidth = sidePanelWidth;
+
+    const onMouseMove = (ev: MouseEvent) => {
+      const delta = ev.clientX - startX;
+      const newWidth = Math.max(200, Math.min(600, startWidth + (sidePanelPosition === 'left' ? delta : -delta)));
+      setSidePanelWidth(newWidth);
+    };
+    const onMouseUp = () => {
+      sftpResizingRef.current = false;
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', onMouseUp);
+    };
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+  }, [sidePanelWidth, sidePanelPosition]);
 
   // Pre-compute host lookup map for O(1) access
   const hostMap = useMemo(() => {
@@ -226,6 +428,89 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
     return map;
   }, [sessions, hostMap]);
 
+  const validTerminalTabIds = useMemo(() => {
+    const ids = new Set<string>();
+    for (const session of sessions) ids.add(session.id);
+    for (const workspace of workspaces) ids.add(workspace.id);
+    return ids;
+  }, [sessions, workspaces]);
+
+  const onSplitSessionRef = useRef(onSplitSession);
+  onSplitSessionRef.current = onSplitSession;
+  const splitHorizontalHandlersRef = useRef<Map<string, () => void>>(new Map());
+  const splitVerticalHandlersRef = useRef<Map<string, () => void>>(new Map());
+
+  useEffect(() => {
+    const validSessionIds = new Set(sessions.map((session) => session.id));
+
+    for (const [id] of splitHorizontalHandlersRef.current) {
+      if (!validSessionIds.has(id)) {
+        splitHorizontalHandlersRef.current.delete(id);
+      }
+    }
+    for (const [id] of splitVerticalHandlersRef.current) {
+      if (!validSessionIds.has(id)) {
+        splitVerticalHandlersRef.current.delete(id);
+      }
+    }
+
+    for (const session of sessions) {
+      if (!splitHorizontalHandlersRef.current.has(session.id)) {
+        splitHorizontalHandlersRef.current.set(session.id, () => {
+          onSplitSessionRef.current?.(session.id, 'horizontal');
+        });
+      }
+      if (!splitVerticalHandlersRef.current.has(session.id)) {
+        splitVerticalHandlersRef.current.set(session.id, () => {
+          onSplitSessionRef.current?.(session.id, 'vertical');
+        });
+      }
+    }
+  }, [sessions]);
+
+  const onToggleWorkspaceViewModeRef = useRef(onToggleWorkspaceViewMode);
+  onToggleWorkspaceViewModeRef.current = onToggleWorkspaceViewMode;
+  const workspaceFocusHandlersRef = useRef<Map<string, () => void>>(new Map());
+
+  const onToggleBroadcastRef = useRef(onToggleBroadcast);
+  onToggleBroadcastRef.current = onToggleBroadcast;
+  const workspaceBroadcastHandlersRef = useRef<Map<string, () => void>>(new Map());
+
+  useEffect(() => {
+    const validWorkspaceIds = new Set(workspaces.map((workspace) => workspace.id));
+
+    for (const [id] of workspaceFocusHandlersRef.current) {
+      if (!validWorkspaceIds.has(id)) {
+        workspaceFocusHandlersRef.current.delete(id);
+      }
+    }
+    for (const [id] of workspaceBroadcastHandlersRef.current) {
+      if (!validWorkspaceIds.has(id)) {
+        workspaceBroadcastHandlersRef.current.delete(id);
+      }
+    }
+
+    for (const workspace of workspaces) {
+      if (!workspaceFocusHandlersRef.current.has(workspace.id)) {
+        workspaceFocusHandlersRef.current.set(workspace.id, () => {
+          onToggleWorkspaceViewModeRef.current?.(workspace.id);
+        });
+      }
+      if (!workspaceBroadcastHandlersRef.current.has(workspace.id)) {
+        workspaceBroadcastHandlersRef.current.set(workspace.id, () => {
+          onToggleBroadcastRef.current?.(workspace.id);
+        });
+      }
+    }
+  }, [workspaces]);
+
+  useEffect(() => {
+    setSidePanelOpenTabs(prev => filterTabsMap(prev, validTerminalTabIds));
+    setSftpHostForTab(prev => filterTabsMap(prev, validTerminalTabIds));
+    setSftpInitialLocationForTab(prev => filterTabsMap(prev, validTerminalTabIds));
+    setSftpPendingUploadsForTab(prev => filterTabsMap(prev, validTerminalTabIds));
+  }, [validTerminalTabIds]);
+
   const computeWorkspaceRects = useCallback((workspace?: Workspace, size?: { width: number; height: number }): Record<string, WorkspaceRect> => {
     if (!workspace) return {} as Record<string, WorkspaceRect>;
     const wTotal = size?.width || 1;
@@ -435,6 +720,192 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
   const isFocusMode = activeWorkspace?.viewMode === 'focus';
   const focusedSessionId = activeWorkspace?.focusedSessionId;
 
+  // Resolve the SFTP host for the current tab.
+  // Uses the stored host from when the user opened SFTP, but updates when
+  // the focused session changes in workspace mode.
+  const sftpActiveHost = useMemo((): Host | null => {
+    if (!isSftpOpenForCurrentTab || !activeTabId) return null;
+    // For workspace: follow focus
+    if (activeWorkspace && focusedSessionId) {
+      return sessionHostsMap.get(focusedSessionId) ?? sftpHostForTab.get(activeTabId) ?? null;
+    }
+    // For solo session: use stored host (from when SFTP was opened)
+    return sftpHostForTab.get(activeTabId) ?? null;
+  }, [isSftpOpenForCurrentTab, activeTabId, activeWorkspace, focusedSessionId, sessionHostsMap, sftpHostForTab]);
+
+  // Keep sftpHostForTab in sync with focus changes in workspace mode
+  // so that the toggle check uses the currently displayed host.
+  useEffect(() => {
+    if (!activeTabId || !sftpActiveHost) return;
+    if (sidePanelOpenTabs.get(activeTabId) !== 'sftp') return;
+    const stored = sftpHostForTab.get(activeTabId);
+    if (stored?.id === sftpActiveHost.id
+      && stored?.hostname === sftpActiveHost.hostname
+      && stored?.port === sftpActiveHost.port
+      && stored?.protocol === sftpActiveHost.protocol) return;
+    setSftpHostForTab(prev => {
+      const next = new Map(prev);
+      next.set(activeTabId, sftpActiveHost);
+      return next;
+    });
+  }, [activeTabId, sftpActiveHost, sidePanelOpenTabs, sftpHostForTab]);
+
+  const mountedSftpTabIds = useMemo(
+    () => Array.from(sftpHostForTab.keys()),
+    [sftpHostForTab],
+  );
+
+  // Get the focused terminal's current working directory
+  const getTerminalCwd = useCallback(async (): Promise<string | null> => {
+    const sessionId = activeWorkspace?.focusedSessionId ?? activeSession?.id;
+    if (!sessionId) return null;
+    try {
+      const result = await terminalBackend.getSessionPwd(sessionId);
+      return result.success && result.cwd ? result.cwd : null;
+    } catch {
+      return null;
+    }
+  }, [activeWorkspace?.focusedSessionId, activeSession?.id, terminalBackend]);
+
+  // Close the entire side panel for the current tab
+  const handleCloseSidePanel = useCallback(() => {
+    if (!activeTabId) return;
+    setSidePanelOpenTabs(prev => {
+      const next = new Map(prev);
+      next.delete(activeTabId);
+      return next;
+    });
+    // Always clean up SFTP state (it may be mounted in the background
+    // while scripts/theme tab was active)
+    setSftpHostForTab(prev => {
+      const next = new Map(prev);
+      next.delete(activeTabId);
+      return next;
+    });
+    setSftpPendingUploadsForTab(prev => {
+      const next = new Map(prev);
+      next.delete(activeTabId);
+      return next;
+    });
+    setSftpInitialLocationForTab(prev => {
+      const next = new Map(prev);
+      next.delete(activeTabId);
+      return next;
+    });
+  }, [activeTabId]);
+
+  // Switch side panel to a specific tab (or toggle if already on that tab)
+  const handleSwitchSidePanelTab = useCallback((tab: SidePanelTab) => {
+    if (!activeTabId) return;
+    const currentPanel = sidePanelOpenTabsRef.current.get(activeTabId);
+
+    // If already on this tab, do nothing — user must click X to close
+    if (currentPanel === tab) return;
+
+    // If switching to SFTP and no host is stored yet, resolve it
+    if (tab === 'sftp' && !sftpHostForTabRef.current.has(activeTabId)) {
+      let host: Host | null = null;
+      if (activeWorkspace && focusedSessionId) {
+        host = sessionHostsMap.get(focusedSessionId) ?? null;
+      } else if (activeSession) {
+        host = sessionHostsMap.get(activeSession.id) ?? null;
+      }
+      if (!host) return;
+      setSftpHostForTab(prev => {
+        const next = new Map(prev);
+        next.set(activeTabId, host);
+        return next;
+      });
+    }
+
+    // Note: When switching away from SFTP, we keep the SFTP host state
+    // so the SftpSidePanel stays mounted (hidden) and preserves connections.
+    // SFTP state is only cleaned up when the panel is fully closed.
+
+    setSidePanelOpenTabs(prev => {
+      const next = new Map(prev);
+      next.set(activeTabId, tab);
+      return next;
+    });
+  }, [activeTabId, activeWorkspace, focusedSessionId, activeSession, sessionHostsMap]);
+
+  // Toggle SFTP from activity bar header
+  const handleToggleSftpFromBar = useCallback(() => {
+    handleSwitchSidePanelTab('sftp');
+  }, [handleSwitchSidePanelTab]);
+
+  // Open scripts side panel (called from Terminal toolbar)
+  const handleOpenScripts = useCallback(() => {
+    handleSwitchSidePanelTab('scripts');
+  }, [handleSwitchSidePanelTab]);
+
+  // Open theme side panel (called from Terminal toolbar)
+  const handleOpenTheme = useCallback(() => {
+    handleSwitchSidePanelTab('theme');
+  }, [handleSwitchSidePanelTab]);
+
+  // Execute snippet on the focused terminal session
+  const handleSnippetClickForFocusedSession = useCallback((command: string) => {
+    const sessionId = activeWorkspace?.focusedSessionId ?? activeSession?.id;
+    if (!sessionId) return;
+    const payload = `${command}\r`;
+    terminalBackend.writeToSession(sessionId, payload);
+    // Re-focus the terminal so the user can interact immediately
+    const pane = document.querySelector(`[data-session-id="${sessionId}"]`);
+    const textarea = pane?.querySelector('textarea.xterm-helper-textarea') as HTMLTextAreaElement | null;
+    textarea?.focus();
+  }, [activeWorkspace?.focusedSessionId, activeSession?.id, terminalBackend]);
+
+  // Resolve theme change handler for the focused session
+  const focusedHost = useMemo((): Host | null => {
+    if (activeWorkspace && focusedSessionId) {
+      return sessionHostsMap.get(focusedSessionId) ?? null;
+    }
+    if (activeSession) {
+      return sessionHostsMap.get(activeSession.id) ?? null;
+    }
+    return null;
+  }, [activeWorkspace, focusedSessionId, activeSession, sessionHostsMap]);
+
+  const isFocusedHostLocal = useMemo(() => {
+    return focusedHost?.protocol === 'local' || !!focusedHost?.id?.startsWith('local-');
+  }, [focusedHost]);
+
+  const handleThemeChangeForFocusedSession = useCallback((themeId: string) => {
+    if (isFocusedHostLocal) {
+      onUpdateTerminalThemeId?.(themeId);
+      return;
+    }
+    if (focusedHost) {
+      onUpdateHost({ ...focusedHost, theme: themeId });
+    }
+  }, [focusedHost, isFocusedHostLocal, onUpdateTerminalThemeId, onUpdateHost]);
+
+  const handleFontFamilyChangeForFocusedSession = useCallback((fontFamilyId: string) => {
+    if (isFocusedHostLocal) {
+      onUpdateTerminalFontFamilyId?.(fontFamilyId);
+      return;
+    }
+    if (focusedHost) {
+      onUpdateHost({ ...focusedHost, fontFamily: fontFamilyId });
+    }
+  }, [focusedHost, isFocusedHostLocal, onUpdateTerminalFontFamilyId, onUpdateHost]);
+
+  const handleFontSizeChangeForFocusedSession = useCallback((newFontSize: number) => {
+    if (isFocusedHostLocal) {
+      onUpdateTerminalFontSize?.(newFontSize);
+      return;
+    }
+    if (focusedHost) {
+      onUpdateHost({ ...focusedHost, fontSize: newFontSize });
+    }
+  }, [focusedHost, isFocusedHostLocal, onUpdateTerminalFontSize, onUpdateHost]);
+
+  // Current theme/font/size for the focused session (for ThemeSidePanel)
+  const focusedThemeId = focusedHost?.theme ?? terminalTheme.id;
+  const focusedFontFamilyId = focusedHost?.fontFamily ?? terminalFontFamilyId;
+  const focusedFontSize = focusedHost?.fontSize ?? fontSize;
+
   // Subscribe to custom theme changes so editing triggers re-render
   const customThemes = useCustomThemes();
 
@@ -620,48 +1091,209 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
       className="absolute inset-0 bg-background flex flex-col"
       style={{ display: isTerminalLayerVisible ? 'flex' : 'none', zIndex: isTerminalLayerVisible ? 10 : 0 }}
     >
-      <div className="flex-1 flex min-h-0 relative">
+      <div className={cn("flex-1 flex min-h-0 relative", sidePanelPosition === 'right' && "flex-row-reverse")}>
+        {/* Side panel with tab header + content (SFTP / Scripts / Theme) */}
+        {(isSidePanelOpenForCurrentTab || mountedSftpTabIds.length > 0) && (
+          <>
+            <div
+              style={{ width: isSidePanelOpenForCurrentTab ? sidePanelWidth : 0 }}
+              className={cn(
+                "flex-shrink-0 h-full relative z-20",
+              )}
+            >
+              {isSidePanelOpenForCurrentTab && (
+                <div
+                  className={cn(
+                    "absolute top-0 h-full w-2 cursor-ew-resize z-30",
+                    sidePanelPosition === 'left' ? "right-[-3px]" : "left-[-3px]",
+                  )}
+                  onMouseDown={handleSidePanelResizeStart}
+                />
+              )}
+              <div
+                className={cn(
+                  "h-full flex flex-col overflow-hidden",
+                  !isSidePanelOpenForCurrentTab && "pointer-events-none",
+                )}
+              >
+                {isSidePanelOpenForCurrentTab && (
+                  <div className="flex h-8 items-center px-1.5 py-0.5 flex-shrink-0 gap-0.5">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className={cn(
+                        "h-6 w-6 rounded-md p-0",
+                        activeSidePanelTab === 'sftp'
+                          ? "text-foreground opacity-100"
+                          : "text-muted-foreground opacity-70 hover:opacity-100",
+                        "hover:bg-transparent",
+                      )}
+                      onClick={handleToggleSftpFromBar}
+                      title="SFTP"
+                    >
+                      <FolderTree size={14} />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className={cn(
+                        "h-6 w-6 rounded-md p-0",
+                        activeSidePanelTab === 'scripts'
+                          ? "text-foreground opacity-100"
+                          : "text-muted-foreground opacity-70 hover:opacity-100",
+                        "hover:bg-transparent",
+                      )}
+                      onClick={handleOpenScripts}
+                      title="Scripts"
+                    >
+                      <Zap size={14} />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className={cn(
+                        "h-6 w-6 rounded-md p-0",
+                        activeSidePanelTab === 'theme'
+                          ? "text-foreground opacity-100"
+                          : "text-muted-foreground opacity-70 hover:opacity-100",
+                        "hover:bg-transparent",
+                      )}
+                      onClick={handleOpenTheme}
+                      title="Theme"
+                    >
+                      <Palette size={14} />
+                    </Button>
+                    <div className="flex-1" />
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className={cn(
+                        "h-6 w-6 rounded-md p-0 text-muted-foreground",
+                        "hover:bg-transparent hover:text-foreground",
+                      )}
+                      onClick={() => setSidePanelPosition(p => p === 'left' ? 'right' : 'left')}
+                      title={sidePanelPosition === 'left' ? 'Move panel to right' : 'Move panel to left'}
+                    >
+                      {sidePanelPosition === 'left' ? <PanelRight size={14} /> : <PanelLeft size={14} />}
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className={cn(
+                        "h-6 w-6 rounded-md p-0 text-muted-foreground",
+                        "hover:bg-transparent hover:text-foreground",
+                      )}
+                      onClick={handleCloseSidePanel}
+                      title="Close panel"
+                    >
+                      <X size={14} />
+                    </Button>
+                  </div>
+                )}
+                <div className="flex-1 min-h-0 relative">
+                  {/* SFTP sub-panel */}
+                  {mountedSftpTabIds.map((tabId) => {
+                    const isVisibleSftpPanel = activeTabId === tabId && activeSidePanelTab === 'sftp';
+                    return (
+                        <SftpSidePanel
+                          key={tabId}
+                          hosts={hosts}
+                          keys={keys}
+                          identities={identities}
+                          updateHosts={updateHosts}
+                          activeHost={isVisibleSftpPanel ? sftpActiveHost : null}
+                          initialLocation={
+                            isVisibleSftpPanel
+                              ? (sftpInitialLocationForTab.get(tabId) ?? null)
+                              : null
+                          }
+                          showWorkspaceHostHeader={isVisibleSftpPanel && !!activeWorkspace}
+                          isVisible={isVisibleSftpPanel}
+                          renderOverlays={isVisibleSftpPanel}
+                          pendingUpload={sftpPendingUploadsForTab.get(tabId) ?? null}
+                          onPendingUploadHandled={(requestId) => handlePendingUploadHandled(tabId, requestId)}
+                          sftpDoubleClickBehavior={sftpDoubleClickBehavior}
+                          sftpAutoSync={isVisibleSftpPanel ? sftpAutoSync : false}
+                          sftpShowHiddenFiles={sftpShowHiddenFiles}
+                          sftpUseCompressedUpload={sftpUseCompressedUpload}
+                          editorWordWrap={editorWordWrap}
+                          setEditorWordWrap={setEditorWordWrap}
+                          onGetTerminalCwd={getTerminalCwd}
+                        />
+                    );
+                  })}
+
+                  {/* Scripts sub-panel */}
+                  {activeSidePanelTab === 'scripts' && (
+                    <div className="absolute inset-0 z-10">
+                      <ScriptsSidePanel
+                        snippets={snippets}
+                        packages={snippetPackages}
+                        onSnippetClick={handleSnippetClickForFocusedSession}
+                      />
+                    </div>
+                  )}
+
+                  {/* Theme sub-panel */}
+                  {activeSidePanelTab === 'theme' && (
+                    <div className="absolute inset-0 z-10">
+                      <ThemeSidePanel
+                        currentThemeId={focusedThemeId}
+                        currentFontFamilyId={focusedFontFamilyId}
+                        currentFontSize={focusedFontSize}
+                        onThemeChange={handleThemeChangeForFocusedSession}
+                        onFontFamilyChange={handleFontFamilyChangeForFocusedSession}
+                        onFontSizeChange={handleFontSizeChangeForFocusedSession}
+                      />
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+
         {/* Focus mode sidebar */}
         {isFocusMode && renderFocusModeSidebar()}
 
-        {draggingSessionId && !isFocusMode && (
-          <div
-            ref={workspaceOverlayRef}
-            className="absolute inset-0 z-30"
-            onDragOver={(e) => {
-              if (isFocusMode) return;
-              if (!e.dataTransfer.types.includes('session-id')) return;
-              e.preventDefault();
-              e.stopPropagation();
-              const hint = computeSplitHint(e);
-              setDropHint(hint);
-            }}
-            onDragLeave={(e) => {
-              if (!e.dataTransfer.types.includes('session-id')) return;
-              setDropHint(null);
-            }}
-            onDrop={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              handleWorkspaceDrop(e);
-            }}
-          >
-            {dropHint && (
-              <div className="absolute inset-0 pointer-events-none">
-                <div
-                  className="absolute bg-emerald-600/35 border border-emerald-400/70 backdrop-blur-sm transition-all duration-150"
-                  style={{
-                    width: dropHint.rect ? `${dropHint.rect.w}px` : dropHint.direction === 'vertical' ? '50%' : '100%',
-                    height: dropHint.rect ? `${dropHint.rect.h}px` : dropHint.direction === 'vertical' ? '100%' : '50%',
-                    left: dropHint.rect ? `${dropHint.rect.x}px` : dropHint.direction === 'vertical' ? (dropHint.position === 'left' ? 0 : '50%') : 0,
-                    top: dropHint.rect ? `${dropHint.rect.y}px` : dropHint.direction === 'vertical' ? 0 : (dropHint.position === 'top' ? 0 : '50%'),
-                  }}
-                />
-              </div>
-            )}
-          </div>
-        )}
-        <div ref={workspaceInnerRef} className={cn("absolute overflow-hidden", isFocusMode ? "left-56 right-0 top-0 bottom-0" : "inset-0")}>
+        <div ref={workspaceInnerRef} className="overflow-hidden relative flex-1">
+          {draggingSessionId && !isFocusMode && (
+            <div
+              ref={workspaceOverlayRef}
+              className="absolute inset-0 z-30"
+              onDragOver={(e) => {
+                if (isFocusMode) return;
+                if (!e.dataTransfer.types.includes('session-id')) return;
+                e.preventDefault();
+                e.stopPropagation();
+                const hint = computeSplitHint(e);
+                setDropHint(hint);
+              }}
+              onDragLeave={(e) => {
+                if (!e.dataTransfer.types.includes('session-id')) return;
+                setDropHint(null);
+              }}
+              onDrop={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleWorkspaceDrop(e);
+              }}
+            >
+              {dropHint && (
+                <div className="absolute inset-0 pointer-events-none">
+                  <div
+                    className="absolute bg-emerald-600/35 border border-emerald-400/70 backdrop-blur-sm transition-all duration-150"
+                    style={{
+                      width: dropHint.rect ? `${dropHint.rect.w}px` : dropHint.direction === 'vertical' ? '50%' : '100%',
+                      height: dropHint.rect ? `${dropHint.rect.h}px` : dropHint.direction === 'vertical' ? '100%' : '50%',
+                      left: dropHint.rect ? `${dropHint.rect.x}px` : dropHint.direction === 'vertical' ? (dropHint.position === 'left' ? 0 : '50%') : 0,
+                      top: dropHint.rect ? `${dropHint.rect.y}px` : dropHint.direction === 'vertical' ? 0 : (dropHint.position === 'top' ? 0 : '50%'),
+                    }}
+                  />
+                </div>
+              )}
+            </div>
+          )}
           {sessions.map(session => {
             // Use pre-computed host to avoid creating new objects on every render
             const host = sessionHostsMap.get(session.id)!;
@@ -694,6 +1326,14 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
 
             // Check if this pane is the focused one in the workspace
             const isFocusedPane = inActiveWorkspace && !isFocusMode && session.id === focusedSessionId;
+            const workspaceFocusHandler = activeWorkspace
+              ? workspaceFocusHandlersRef.current.get(activeWorkspace.id)
+              : undefined;
+            const workspaceBroadcastHandler = activeWorkspace
+              ? workspaceBroadcastHandlersRef.current.get(activeWorkspace.id)
+              : undefined;
+            const splitHorizontalHandler = splitHorizontalHandlersRef.current.get(session.id);
+            const splitVerticalHandler = splitVerticalHandlersRef.current.get(session.id);
 
             return (
               <div
@@ -733,12 +1373,12 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
                   sessionId={session.id}
                   startupCommand={session.startupCommand}
                   serialConfig={session.serialConfig}
-                  onUpdateTerminalThemeId={onUpdateTerminalThemeId}
-                  onUpdateTerminalFontFamilyId={onUpdateTerminalFontFamilyId}
-                  onUpdateTerminalFontSize={onUpdateTerminalFontSize}
                   hotkeyScheme={hotkeyScheme}
                   keyBindings={keyBindings}
                   onHotkeyAction={onHotkeyAction}
+                  onOpenSftp={handleOpenSftp}
+                  onOpenScripts={handleOpenScripts}
+                  onOpenTheme={handleOpenTheme}
                   onCloseSession={handleCloseSession}
                   onStatusChange={handleStatusChange}
                   onSessionExit={handleSessionExit}
@@ -747,12 +1387,12 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
                   onUpdateHost={handleUpdateHost}
                   onAddKnownHost={handleAddKnownHost}
                   onCommandExecuted={handleCommandExecuted}
-                  onExpandToFocus={inActiveWorkspace && !isFocusMode && activeWorkspace ? () => onToggleWorkspaceViewMode?.(activeWorkspace.id) : undefined}
-                  onSplitHorizontal={onSplitSession ? () => onSplitSession(session.id, 'horizontal') : undefined}
-                  onSplitVertical={onSplitSession ? () => onSplitSession(session.id, 'vertical') : undefined}
+                  onExpandToFocus={inActiveWorkspace && !isFocusMode ? workspaceFocusHandler : undefined}
+                  onSplitHorizontal={onSplitSession ? splitHorizontalHandler : undefined}
+                  onSplitVertical={onSplitSession ? splitVerticalHandler : undefined}
                   isBroadcastEnabled={inActiveWorkspace && activeWorkspace ? isBroadcastEnabled?.(activeWorkspace.id) : false}
-                  onToggleBroadcast={inActiveWorkspace && activeWorkspace ? () => onToggleBroadcast?.(activeWorkspace.id) : undefined}
-                  onToggleComposeBar={inActiveWorkspace ? () => setIsComposeBarOpen(prev => !prev) : undefined}
+                  onToggleBroadcast={inActiveWorkspace ? workspaceBroadcastHandler : undefined}
+                  onToggleComposeBar={inActiveWorkspace ? handleToggleWorkspaceComposeBar : undefined}
                   isWorkspaceComposeBarOpen={inActiveWorkspace ? isComposeBarOpen : undefined}
                   onBroadcastInput={inActiveWorkspace && activeWorkspace && isBroadcastEnabled?.(activeWorkspace.id) ? handleBroadcastInput : undefined}
                 />
@@ -843,6 +1483,7 @@ const terminalLayerAreEqual = (prev: TerminalLayerProps, next: TerminalLayerProp
     prev.hosts === next.hosts &&
     prev.keys === next.keys &&
     prev.snippets === next.snippets &&
+    prev.snippetPackages === next.snippetPackages &&
     prev.sessions === next.sessions &&
     prev.workspaces === next.workspaces &&
     prev.draggingSessionId === next.draggingSessionId &&
@@ -851,11 +1492,18 @@ const terminalLayerAreEqual = (prev: TerminalLayerProps, next: TerminalLayerProp
     prev.fontSize === next.fontSize &&
     prev.hotkeyScheme === next.hotkeyScheme &&
     prev.keyBindings === next.keyBindings &&
+    prev.sftpDoubleClickBehavior === next.sftpDoubleClickBehavior &&
+    prev.sftpAutoSync === next.sftpAutoSync &&
+    prev.sftpShowHiddenFiles === next.sftpShowHiddenFiles &&
+    prev.sftpUseCompressedUpload === next.sftpUseCompressedUpload &&
+    prev.editorWordWrap === next.editorWordWrap &&
+    prev.setEditorWordWrap === next.setEditorWordWrap &&
     prev.onHotkeyAction === next.onHotkeyAction &&
     prev.onUpdateHost === next.onUpdateHost &&
     prev.onToggleWorkspaceViewMode === next.onToggleWorkspaceViewMode &&
     prev.onSetWorkspaceFocusedSession === next.onSetWorkspaceFocusedSession &&
-    prev.onSplitSession === next.onSplitSession
+    prev.onSplitSession === next.onSplitSession &&
+    prev.identities === next.identities
   );
 };
 

components/ThemeSelectPanel.tsx

@@ -70,18 +70,6 @@ const ThemeSelectPanel: React.FC<ThemeSelectPanelProps> = ({
         return [...TERMINAL_THEMES, ...customThemes];
     }, [customThemes]);
 
-    // Group themes by type - reserved for future sectioned view
-    const _groupedThemes = useMemo(() => {
-        const dark = allThemes.filter(t => t.type === 'dark');
-        const light = allThemes.filter(t => t.type === 'light');
-        return { dark, light };
-    }, [allThemes]);
-
-    // Find selected theme info - reserved for displaying selection details
-    const _selectedTheme = useMemo(() => {
-        return allThemes.find(t => t.id === selectedThemeId);
-    }, [selectedThemeId, allThemes]);
-
     const renderThemeItem = (theme: TerminalTheme) => {
         const isSelected = theme.id === selectedThemeId;
 

components/TopTabs.tsx

@@ -1,11 +1,13 @@
-import { Bell, Copy, FileText, Folder, LayoutGrid, Minus, Moon, MoreHorizontal, Plus, Shield, Square, Sun, TerminalSquare, X } from 'lucide-react';
+import { Bell, Copy, FileText, Folder, LayoutGrid, Minus, Moon, MoreHorizontal, Plus, Server, Shield, Square, Sun, TerminalSquare, Usb, X } from 'lucide-react';
 import React, { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { activeTabStore, useActiveTabId } from '../application/state/activeTabStore';
 import { LogView } from '../application/state/useSessionState';
 import { useWindowControls } from '../application/state/useWindowControls';
 import { useI18n } from '../application/i18n/I18nProvider';
+import { normalizeDistroId } from '../domain/host';
 import { cn } from '../lib/utils';
-import { TerminalSession, Workspace } from '../types';
+import { Host, TerminalSession, Workspace } from '../types';
+import { DISTRO_LOGOS, DISTRO_COLORS } from './DistroAvatar';
 import { Button } from './ui/button';
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from './ui/context-menu';
 import { SyncStatusButton } from './SyncStatusButton';
@@ -16,6 +18,7 @@ const dragRegionNoSelect = { WebkitAppRegion: 'drag', userSelect: 'none' } as Re
 
 interface TopTabsProps {
   theme: 'dark' | 'light';
+  hosts: Host[];
   sessions: TerminalSession[];
   orphanSessions: TerminalSession[];
   workspaces: Workspace[];
@@ -38,6 +41,82 @@ interface TopTabsProps {
   onReorderTabs: (draggedId: string, targetId: string, position: 'before' | 'after') => void;
 }
 
+// Detect local OS for local terminal tab icons
+const localOsId = (() => {
+  if (typeof navigator === 'undefined') return 'linux';
+  const ua = navigator.userAgent;
+  if (/Mac/i.test(ua)) return 'macos';
+  if (/Win/i.test(ua)) return 'windows';
+  return 'linux';
+})();
+
+// Lightweight OS/distro icon for session tabs — matches DistroAvatar "sm" style
+const SessionTabIcon: React.FC<{ host: Host | undefined; isActive: boolean; protocol?: string }> = memo(({ host, isActive, protocol }) => {
+  const boxBase = "shrink-0 h-4 w-4 rounded flex items-center justify-center";
+  const iconSize = "h-2.5 w-2.5";
+  const fallbackIcon = cn(iconSize, isActive ? "text-accent" : "text-muted-foreground");
+
+  // Serial protocol → USB icon
+  if (protocol === 'serial' || host?.protocol === 'serial') {
+    return (
+      <div className={cn(boxBase, "bg-amber-500/15 text-amber-500")}>
+        <Usb className={iconSize} />
+      </div>
+    );
+  }
+
+  // Local protocol → OS-specific icon (protocol may be undefined for local sessions)
+  if (protocol === 'local' || host?.protocol === 'local' || (!protocol && !host)) {
+    const logo = DISTRO_LOGOS[localOsId];
+    const bg = DISTRO_COLORS[localOsId] || DISTRO_COLORS.default;
+    if (logo) {
+      return (
+        <div className={cn(boxBase, bg)}>
+          <img
+            src={logo}
+            alt={localOsId}
+            className={cn(iconSize, "object-contain invert brightness-0")}
+          />
+        </div>
+      );
+    }
+    return (
+      <div className={cn(boxBase, "bg-primary/15 text-primary")}>
+        <TerminalSquare className={iconSize} />
+      </div>
+    );
+  }
+
+  // Try distro logo with brand background color
+  if (host) {
+    const distro = normalizeDistroId(host.distro) || (host.distro || '').toLowerCase();
+    const logo = DISTRO_LOGOS[distro];
+    if (logo) {
+      const bg = DISTRO_COLORS[distro] || DISTRO_COLORS.default;
+      return (
+        <div className={cn(boxBase, bg)}>
+          <img
+            src={logo}
+            alt={host.distro || host.os}
+            className={cn(iconSize, "object-contain invert brightness-0")}
+          />
+        </div>
+      );
+    }
+  }
+
+  // Fallback: generic server icon for remote, terminal for unknown
+  if (host && host.protocol !== 'local') {
+    return (
+      <div className={cn(boxBase, "bg-primary/15 text-primary")}>
+        <Server className={iconSize} />
+      </div>
+    );
+  }
+  return <TerminalSquare className={fallbackIcon} />;
+});
+SessionTabIcon.displayName = 'SessionTabIcon';
+
 const sessionStatusDot = (status: TerminalSession['status']) => {
   const tone = status === 'connected'
     ? "bg-emerald-400"
@@ -56,12 +135,19 @@ const WindowControls: React.FC = memo(() => {
     // Check initial maximized state
     fetchIsMaximized().then(v => setIsMaximized(!!v));
 
-    // Listen for window resize to update maximized state
+    // Listen for window resize to update maximized state (debounced to avoid IPC storm)
+    let resizeTimer: ReturnType<typeof setTimeout> | null = null;
     const handleResize = () => {
-      fetchIsMaximized().then(v => setIsMaximized(!!v));
+      if (resizeTimer) clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(() => {
+        fetchIsMaximized().then(v => setIsMaximized(!!v));
+      }, 200);
     };
     window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      if (resizeTimer) clearTimeout(resizeTimer);
+    };
   }, [fetchIsMaximized]);
 
   const handleMinimize = () => {
@@ -78,17 +164,17 @@ const WindowControls: React.FC = memo(() => {
   };
 
   return (
-    <div className="flex items-center app-drag">
+    <div className="flex items-center app-drag h-full">
       <button
         onClick={handleMinimize}
-        className="h-8 w-10 flex items-center justify-center text-muted-foreground hover:bg-foreground/10 hover:text-foreground transition-all duration-150 app-no-drag"
+        className="h-full w-10 flex items-center justify-center text-muted-foreground hover:bg-foreground/10 hover:text-foreground transition-all duration-150 app-no-drag"
         title="Minimize"
       >
         <Minus size={16} />
       </button>
       <button
         onClick={handleMaximize}
-        className="h-8 w-10 flex items-center justify-center text-muted-foreground hover:bg-foreground/10 hover:text-foreground transition-all duration-150 app-no-drag"
+        className="h-full w-10 flex items-center justify-center text-muted-foreground hover:bg-foreground/10 hover:text-foreground transition-all duration-150 app-no-drag"
         title={isMaximized ? "Restore" : "Maximize"}
       >
         {isMaximized ? (
@@ -101,7 +187,7 @@ const WindowControls: React.FC = memo(() => {
       </button>
       <button
         onClick={handleClose}
-        className="h-8 w-10 flex items-center justify-center text-muted-foreground hover:bg-red-500 hover:text-white transition-all duration-150 app-no-drag"
+        className="h-full w-10 flex items-center justify-center text-muted-foreground hover:bg-red-500 hover:text-white transition-all duration-150 app-no-drag"
         title="Close"
       >
         <X size={16} />
@@ -113,6 +199,7 @@ WindowControls.displayName = 'WindowControls';
 
 const TopTabsInner: React.FC<TopTabsProps> = ({
   theme,
+  hosts,
   sessions,
   orphanSessions,
   workspaces,
@@ -235,6 +322,12 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
     return map;
   }, [logViews]);
 
+  const hostMap = useMemo(() => {
+    const map = new Map<string, Host>();
+    for (const h of hosts) map.set(h.id, h);
+    return map;
+  }, [hosts]);
+
   // Pre-compute session counts per workspace for O(1) access
   const workspacePaneCounts = useMemo(() => {
     const counts = new Map<string, number>();
@@ -376,26 +469,29 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                 onDragLeave={handleTabDragLeave}
                 onDrop={(e) => handleTabDrop(e, session.id)}
                 className={cn(
-                  "relative h-6 pl-3 pr-2 min-w-[140px] max-w-[240px] rounded-md border text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
-                  "transition-all duration-200 ease-out",
-                  activeTabId === session.id ? "bg-accent/20 text-foreground" : "border-border/60 text-muted-foreground hover:border-accent/40 hover:text-foreground",
+                  "relative h-7 pl-3 pr-2 min-w-[140px] max-w-[240px] rounded-none text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
+                  "transition-all duration-150",
+                  activeTabId === session.id
+                    ? "bg-background text-foreground"
+                    : "text-muted-foreground hover:bg-background/40 hover:text-foreground",
                   isBeingDragged && isDraggingForReorder ? "opacity-40 scale-95" : ""
                 )}
-                style={{
-                  ...shiftStyle,
-                  ...(activeTabId === session.id ? { borderColor: 'hsl(var(--accent))' } : {})
-                }}
+                style={shiftStyle}
               >
+                {/* Active tab top accent line */}
+                {activeTabId === session.id && (
+                  <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent" />
+                )}
                 {/* Drop indicator line - before */}
                 {showDropIndicatorBefore && isDraggingForReorder && (
-                  <div className="absolute -left-1.5 top-1 bottom-1 w-0.5 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
+                  <div className="absolute -left-0.5 top-1 bottom-1 w-0.5 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
                 )}
                 {/* Drop indicator line - after */}
                 {showDropIndicatorAfter && isDraggingForReorder && (
-                  <div className="absolute -right-1.5 top-1 bottom-1 w-0.5 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
+                  <div className="absolute -right-0.5 top-1 bottom-1 w-0.5 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
                 )}
                 <div className="flex items-center gap-2 min-w-0 flex-1">
-                  <TerminalSquare size={14} className={cn("shrink-0", activeTabId === session.id ? "text-accent" : "text-muted-foreground")} />
+                  <SessionTabIcon host={hostMap.get(session.hostId)} isActive={activeTabId === session.id} protocol={session.protocol} />
                   <span className="truncate">{session.hostLabel}</span>
                   <div className="flex-shrink-0">{sessionStatusDot(session.status)}</div>
                 </div>
@@ -445,23 +541,26 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
                 onDragLeave={handleTabDragLeave}
                 onDrop={(e) => handleTabDrop(e, workspace.id)}
                 className={cn(
-                  "relative h-6 pl-3 pr-2 min-w-[150px] max-w-[260px] rounded-md border text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
-                  "transition-all duration-200 ease-out",
-                  isActive ? "bg-accent/20 text-foreground" : "border-border/60 text-muted-foreground hover:border-accent/40 hover:text-foreground",
+                  "relative h-7 pl-3 pr-2 min-w-[150px] max-w-[260px] rounded-none text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
+                  "transition-all duration-150",
+                  isActive
+                    ? "bg-background text-foreground"
+                    : "text-muted-foreground hover:bg-background/40 hover:text-foreground",
                   isBeingDragged && isDraggingForReorder ? "opacity-40 scale-95" : ""
                 )}
-                style={{
-                  ...shiftStyle,
-                  ...(isActive ? { borderColor: 'hsl(var(--accent))' } : {})
-                }}
+                style={shiftStyle}
               >
+                {/* Active tab top accent line */}
+                {isActive && (
+                  <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent" />
+                )}
                 {/* Drop indicator line - before */}
                 {showDropIndicatorBefore && isDraggingForReorder && (
-                  <div className="absolute -left-1.5 top-1 bottom-1 w-0.5 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
+                  <div className="absolute -left-0.5 top-1 bottom-1 w-0.5 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
                 )}
                 {/* Drop indicator line - after */}
                 {showDropIndicatorAfter && isDraggingForReorder && (
-                  <div className="absolute -right-1.5 top-1 bottom-1 w-0.5 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
+                  <div className="absolute -right-0.5 top-1 bottom-1 w-0.5 bg-primary rounded-full shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
                 )}
                 <div className="flex items-center gap-2 truncate">
                   <LayoutGrid size={14} className={cn("shrink-0", isActive ? "text-primary" : "text-muted-foreground")} />
@@ -495,12 +594,17 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
             data-tab-id={logView.id}
             onClick={() => onSelectTab(logView.id)}
             className={cn(
-              "relative h-6 pl-3 pr-2 min-w-[140px] max-w-[240px] rounded-md border text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
-              "transition-all duration-200 ease-out",
-              isActive ? "bg-accent/20 text-foreground" : "border-border/60 text-muted-foreground hover:border-accent/40 hover:text-foreground"
+              "relative h-7 pl-3 pr-2 min-w-[140px] max-w-[240px] rounded-none text-xs font-semibold cursor-pointer flex items-center justify-between gap-2 app-no-drag flex-shrink-0",
+              "transition-colors duration-150",
+              isActive
+                ? "bg-background text-foreground"
+                : "text-muted-foreground hover:bg-background/40 hover:text-foreground"
             )}
-            style={isActive ? { borderColor: 'hsl(var(--accent))' } : {}}
           >
+            {/* Active tab top accent line */}
+            {isActive && (
+              <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent" />
+            )}
             <div className="flex items-center gap-2 min-w-0 flex-1">
               <FileText size={14} className={cn("shrink-0", isActive ? "text-accent" : "text-muted-foreground")} />
               <span className="truncate">
@@ -536,36 +640,41 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
 
   return (
     <div
-      className="relative w-full bg-secondary border-b border-border/60 app-drag"
+      className="relative w-full bg-secondary app-drag"
       style={dragRegionNoSelect}
       onDoubleClick={handleTitleBarDoubleClick}
     >
       {/* Always-on drag stripe so the window can be moved even when tabs fill the bar */}
       <div className="absolute inset-x-0 top-0 h-1 app-drag pointer-events-auto z-10" style={dragRegionStyle} aria-hidden />
       <div
-        className="h-8 flex items-center gap-2 app-drag"
+        className="h-9 flex items-end gap-0 app-drag"
         style={{ ...dragRegionStyle, paddingLeft: isMacClient && !isWindowFullscreen ? 76 : 12, paddingRight: isMacClient ? 12 : 0 }}
       >
         {/* Fixed left tabs: Vaults and SFTP */}
-        <div className="flex items-center gap-2 flex-shrink-0 app-drag">
+        <div className="flex items-end gap-0 flex-shrink-0 app-drag">
           <div
             onClick={() => onSelectTab('vault')}
             className={cn(
-              "h-6 px-3 rounded-md border text-xs font-semibold cursor-pointer flex items-center gap-2 app-no-drag",
-              isVaultActive ? "bg-accent/20 text-foreground" : "border-border/60 text-muted-foreground hover:border-accent/40 hover:text-foreground"
+              "relative h-7 px-3 rounded text-xs font-semibold cursor-pointer flex items-center gap-2 app-no-drag",
+              "transition-colors duration-150",
+              isVaultActive
+                ? "bg-foreground/10 text-foreground"
+                : "text-muted-foreground hover:bg-background/40 hover:text-foreground"
             )}
-            style={isVaultActive ? { borderColor: 'hsl(var(--accent))' } : undefined}
           >
             <Shield size={14} /> Vaults
           </div>
           <div
             onClick={() => onSelectTab('sftp')}
             className={cn(
-              "h-6 px-3 rounded-md border text-xs font-semibold cursor-pointer flex items-center gap-2 app-no-drag",
-              isSftpActive ? "bg-accent/20 text-foreground" : "border-border/60 text-muted-foreground hover:border-accent/40 hover:text-foreground"
+              "relative h-7 px-3 rounded-none text-xs font-semibold cursor-pointer flex items-center gap-2 app-no-drag",
+              "transition-colors duration-150",
+              isSftpActive
+                ? "bg-background text-foreground"
+                : "text-muted-foreground hover:bg-background/40 hover:text-foreground"
             )}
-            style={isSftpActive ? { borderColor: 'hsl(var(--accent))' } : undefined}
           >
+            {isSftpActive && <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent" />}
             <Folder size={14} /> SFTP
           </div>
         </div>
@@ -594,7 +703,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
           {/* Scrollable container */}
           <div
             ref={tabsContainerRef}
-            className="flex items-center gap-2 overflow-x-auto scrollbar-none app-drag max-w-full"
+            className="flex items-end gap-0 overflow-x-auto scrollbar-none app-drag max-w-full"
             style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
           >
             {renderOrderedTabs()}
@@ -603,7 +712,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
               <Button
                 variant="ghost"
                 size="icon"
-                className="h-6 w-6 flex-shrink-0 app-no-drag"
+                className="h-7 w-7 flex-shrink-0 app-no-drag mb-0 rounded-none"
                 onClick={onOpenQuickSwitcher}
                 title="Open quick switcher"
               >
@@ -611,7 +720,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
               </Button>
             )}
             {/* Draggable spacer - fixed width handle at the end */}
-            <div className="min-w-[20px] h-6 app-drag flex-shrink-0" style={dragRegionStyle} />
+            <div className="min-w-[20px] h-7 app-drag flex-shrink-0" style={dragRegionStyle} />
           </div>
 
           {/* Right fade mask */}
@@ -628,7 +737,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
           <Button
             variant="ghost"
             size="icon"
-            className="h-6 w-6 flex-shrink-0 app-no-drag"
+            className="h-7 w-7 flex-shrink-0 app-no-drag self-end rounded-none"
             onClick={onOpenQuickSwitcher}
             title="More tabs"
           >
@@ -637,7 +746,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
         )}
 
         {/* Fixed right controls */}
-        <div className="flex-shrink-0 flex items-center gap-2 app-drag" style={dragRegionStyle}>
+        <div className="flex-shrink-0 flex items-center gap-2 app-drag self-center" style={dragRegionStyle}>
           <Button variant="ghost" size="icon" className="h-6 w-6 text-muted-foreground hover:text-foreground app-no-drag">
             <Bell size={16} />
           </Button>
@@ -653,9 +762,9 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
           </Button>
         </div>
         {/* Custom window controls for Windows/Linux */}
-        {!isMacClient && <WindowControls />}
+        {!isMacClient && <div className="self-stretch flex items-stretch"><WindowControls /></div>}
         {/* Small drag shim to the right edge (macOS only – on Windows the close button should touch the edge) */}
-        {isMacClient && <div className="w-2 h-8 app-drag flex-shrink-0" />}
+        {isMacClient && <div className="w-2 h-9 app-drag flex-shrink-0" />}
       </div>
     </div>
   );
@@ -665,6 +774,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
 const topTabsAreEqual = (prev: TopTabsProps, next: TopTabsProps): boolean => {
   return (
     prev.theme === next.theme &&
+    prev.hosts === next.hosts &&
     prev.sessions === next.sessions &&
     prev.orphanSessions === next.orphanSessions &&
     prev.workspaces === next.workspaces &&

components/TrayPanel.tsx

@@ -152,7 +152,7 @@ const TrayPanelContent: React.FC = () => {
   }, [onTrayPanelRefresh]);
 
   const keysForPf = useMemo(
-    () => keys.map((k) => ({ id: k.id, privateKey: k.privateKey })),
+    () => keys.map((k) => ({ id: k.id, privateKey: k.privateKey, passphrase: k.passphrase })),
     [keys],
   );
 

components/VaultView.tsx

@@ -715,6 +715,26 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
     return root;
   }, [hosts, customGroups]);
 
+  // Generate all possible group paths from the tree (including all intermediate nodes)
+  const allGroupPaths = useMemo(() => {
+    const paths = new Set<string>();
+
+    const traverse = (nodes: Record<string, GroupNode>) => {
+      Object.values(nodes).forEach((node) => {
+        if (node.path) {
+          paths.add(node.path);
+        }
+        if (node.children) {
+          traverse(node.children);
+        }
+      });
+    };
+
+    // Traverse the tree
+    traverse(buildGroupTree);
+
+    return Array.from(paths).sort();
+  }, [buildGroupTree]);
 
   const findGroupNode = (path: string | null): GroupNode | null => {
     if (!path)
@@ -879,6 +899,17 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
     return root;
   }, [treeViewHosts, customGroups]);
 
+  // Helper function to recursively count all hosts in a node and its children
+  const countAllHostsInNode = (node: GroupNode): number => {
+    let count = node.hosts.length;
+    if (node.children) {
+      Object.values(node.children).forEach((child) => {
+        count += countAllHostsInNode(child);
+      });
+    }
+    return count;
+  };
+
   // Create tree view specific group tree that excludes ungrouped hosts
   const treeViewGroupTree = useMemo<GroupNode[]>(() => {
     return (Object.values(buildTreeViewGroupTree) as GroupNode[]).sort((a, b) => a.name.localeCompare(b.name));
@@ -1718,7 +1749,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
                                       )}
                                     </div>
                                     <div className="text-[11px] text-muted-foreground">
-                                      {t("vault.groups.hostsCount", { count: node.hosts.length })}
+                                      {t("vault.groups.hostsCount", { count: countAllHostsInNode(node) })}
                                     </div>
                                   </div>
                                 </div>
@@ -2270,12 +2301,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
           initialData={editingHost}
           availableKeys={keys}
           identities={identities}
-          groups={Array.from(
-            new Set([
-              ...customGroups,
-              ...hosts.map((h) => h.group || "General"),
-            ]),
-          )}
+          groups={allGroupPaths}
           managedSources={managedSources}
           allTags={allTags}
           allHosts={hosts}
@@ -2310,12 +2336,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
         <SerialHostDetailsPanel
           initialData={editingHost}
           allTags={allTags}
-          groups={Array.from(
-            new Set([
-              ...customGroups,
-              ...hosts.map((h) => h.group || "General"),
-            ]),
-          )}
+          groups={allGroupPaths}
           onSave={(host) => {
             onUpdateHosts(
               hosts.map((h) => (h.id === host.id ? host : h)),
@@ -2495,7 +2516,6 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
           open={isQuickConnectOpen}
           target={quickConnectTarget}
           keys={keys}
-          knownHosts={knownHosts}
           onConnect={handleQuickConnect}
           onSaveHost={handleQuickConnectSaveHost}
           onClose={() => {

components/keychain/EditKeyPanel.tsx

@@ -1,94 +0,0 @@
-/**
- * Edit Key Panel - Edit existing SSH key
- */
-
-import { Info } from 'lucide-react';
-import React from 'react';
-import { useI18n } from '../../application/i18n/I18nProvider';
-import { SSHKey } from '../../types';
-import { Button } from '../ui/button';
-import { Input } from '../ui/input';
-import { Label } from '../ui/label';
-import { Textarea } from '../ui/textarea';
-
-interface EditKeyPanelProps {
-    draftKey: Partial<SSHKey>;
-    _originalKey: SSHKey; // Reserved for future diff/comparison feature
-    setDraftKey: (key: Partial<SSHKey>) => void;
-    onExport: () => void;
-    onSave: () => void;
-}
-
-export const EditKeyPanel: React.FC<EditKeyPanelProps> = ({
-    draftKey,
-    _originalKey, // Reserved for future diff/comparison feature
-    setDraftKey,
-    onExport,
-    onSave,
-}) => {
-    const { t } = useI18n();
-    return (
-        <>
-            <div className="space-y-2">
-                <Label>{t('keychain.field.labelRequired')}</Label>
-                <Input
-                    value={draftKey.label || ''}
-                    onChange={e => setDraftKey({ ...draftKey, label: e.target.value })}
-                    placeholder={t('keychain.field.labelPlaceholder')}
-                />
-            </div>
-
-            <div className="space-y-2">
-                <Label className="text-destructive">{t('keychain.field.privateKeyRequired')}</Label>
-                <Textarea
-                    value={draftKey.privateKey || ''}
-                    onChange={e => setDraftKey({ ...draftKey, privateKey: e.target.value })}
-                    placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
-                    className="min-h-[180px] font-mono text-xs"
-                />
-            </div>
-
-            <div className="space-y-2">
-                <Label className="text-muted-foreground">{t('keychain.field.publicKey')}</Label>
-                <Textarea
-                    value={draftKey.publicKey || ''}
-                    onChange={e => setDraftKey({ ...draftKey, publicKey: e.target.value })}
-                    placeholder="ssh-ed25519 AAAA..."
-                    className="min-h-[80px] font-mono text-xs"
-                />
-            </div>
-
-            <div className="space-y-2">
-                <Label className="text-muted-foreground">{t('terminal.auth.certificate')}</Label>
-                <Textarea
-                    value={draftKey.certificate || ''}
-                    onChange={e => setDraftKey({ ...draftKey, certificate: e.target.value })}
-                    placeholder={t('keychain.field.certificatePlaceholder')}
-                    className="min-h-[60px] font-mono text-xs"
-                />
-            </div>
-
-            {/* Key Export section */}
-            <div className="pt-4 mt-4 border-t border-border/60">
-                <div className="flex items-center gap-2 mb-3">
-                    <span className="text-sm font-medium">{t('keychain.export.title')}</span>
-                    <div className="h-4 w-4 rounded-full bg-muted flex items-center justify-center">
-                        <Info size={10} className="text-muted-foreground" />
-                    </div>
-                </div>
-                <Button className="w-full h-11" onClick={onExport}>
-                    {t('keychain.export.exportToHost')}
-                </Button>
-            </div>
-
-            {/* Save button */}
-            <Button
-                className="w-full h-11 mt-4"
-                disabled={!draftKey.label?.trim() || !draftKey.privateKey?.trim()}
-                onClick={onSave}
-            >
-                {t('common.saveChanges')}
-            </Button>
-        </>
-    );
-};

components/keychain/ExportKeyPanel.tsx

@@ -1,246 +0,0 @@
-/**
- * Export Key Panel - Export SSH key to remote host
- */
-
-import { ChevronRight, Info } from 'lucide-react';
-import React, { useState } from 'react';
-import { useKeychainBackend } from '../../application/state/useKeychainBackend';
-import { useI18n } from '../../application/i18n/I18nProvider';
-import { resolveHostAuth } from '../../domain/sshAuth';
-import { cn } from '../../lib/utils';
-import { Host, Identity, SSHKey } from '../../types';
-import { Button } from '../ui/button';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible';
-import { Input } from '../ui/input';
-import { Label } from '../ui/label';
-import { Textarea } from '../ui/textarea';
-import { toast } from '../ui/toast';
-import { getKeyIcon, getKeyTypeDisplay, isMacOS } from './utils';
-
-interface ExportKeyPanelProps {
-    keyItem: SSHKey;
-    _hosts: Host[]; // Reserved for future inline host list/validation
-    keys: SSHKey[];
-    identities: Identity[];
-    exportHost: Host | null;
-    _setExportHost: (host: Host | null) => void; // Host selection handled by onShowHostSelector callback
-    onShowHostSelector: () => void;
-    onSaveHost?: (host: Host) => void;
-    onClose: () => void;
-}
-
-const DEFAULT_EXPORT_SCRIPT = `DIR="$HOME/$1"
-FILE="$DIR/$2"
-if [ ! -d "$DIR" ]; then
-  mkdir -p "$DIR"
-  chmod 700 "$DIR"
-fi
-if [ ! -f "$FILE" ]; then
-  touch "$FILE"
-  chmod 600 "$FILE"
-fi
-echo $3 >> "$FILE"`;
-
-export const ExportKeyPanel: React.FC<ExportKeyPanelProps> = ({
-    keyItem,
-    _hosts, // Reserved for future inline host list/validation
-    keys,
-    identities,
-    exportHost,
-    _setExportHost, // Host selection handled by onShowHostSelector callback
-    onShowHostSelector,
-	onSaveHost,
-	onClose,
-}) => {
-    const { t } = useI18n();
-	const { execCommand } = useKeychainBackend();
-	const [exportLocation, setExportLocation] = useState('.ssh');
-	const [exportFilename, setExportFilename] = useState('authorized_keys');
-	const [exportAdvancedOpen, setExportAdvancedOpen] = useState(false);
-	const [exportScript, setExportScript] = useState(DEFAULT_EXPORT_SCRIPT);
-	const [isExporting, setIsExporting] = useState(false);
-
-    const isMac = isMacOS();
-
-    const handleExport = async () => {
-        if (!exportHost || !keyItem.publicKey) return;
-
-        setIsExporting(true);
-
-        try {
-            const exportAuth = resolveHostAuth({ host: exportHost, keys, identities });
-
-            // Check for authentication method
-            if (!exportAuth.password && !exportAuth.key?.privateKey) {
-                throw new Error(t('keychain.export.missingCredentials'));
-            }
-
-            const hostPrivateKey = exportAuth.key?.privateKey;
-
-            // Escape the public key for shell
-            const escapedPublicKey = keyItem.publicKey.replace(/'/g, "'\\''");
-
-            // Build the command by replacing $1, $2, $3
-            const scriptWithVars = exportScript
-                .replace(/\$1/g, exportLocation)
-                .replace(/\$2/g, exportFilename)
-                .replace(/\$3/g, `'${escapedPublicKey}'`);
-
-			const command = scriptWithVars;
-
-			// Execute via SSH
-			const result = await execCommand({
-				hostname: exportHost.hostname,
-				username: exportAuth.username,
-				port: exportHost.port || 22,
-				password: exportAuth.password,
-                privateKey: hostPrivateKey,
-                command,
-                timeout: 30000,
-                enableKeyboardInteractive: true,
-                sessionId: `export-key:${exportHost.id}:${keyItem.id}`,
-            });
-
-            // Check result
-            const exitCode = result?.code;
-            const hasError = result?.stderr?.trim();
-            if (exitCode === 0 || (exitCode == null && !hasError)) {
-                // Update host to use this key for authentication
-                if (onSaveHost) {
-                    const updatedHost: Host = {
-                        ...exportHost,
-                        identityFileId: keyItem.id,
-                        authMethod: 'key',
-                    };
-                    onSaveHost(updatedHost);
-                }
-                toast.success(
-                  t('keychain.export.successMessage', { host: exportHost.label }),
-                  t('keychain.export.successTitle'),
-                );
-                onClose();
-            } else {
-                const errorMsg = hasError || result?.stdout?.trim() || `Command exited with code ${exitCode}`;
-                toast.error(
-                  t('keychain.export.failedMessage', { error: errorMsg }),
-                  t('keychain.export.failedTitle'),
-                );
-            }
-        } catch (err) {
-            const message = err instanceof Error ? err.message : String(err);
-            toast.error(
-              t('keychain.export.failedGeneric', { message }),
-              t('keychain.export.failedTitle'),
-            );
-        } finally {
-            setIsExporting(false);
-        }
-    };
-
-    return (
-        <>
-            {/* Key info card */}
-            <div className="flex items-center gap-3 p-3 bg-card border border-border/80 rounded-lg">
-                <div className={cn(
-                    "h-10 w-10 rounded-md flex items-center justify-center",
-                    keyItem.certificate
-                      ? "bg-emerald-500/15 text-emerald-500"
-                      : "bg-primary/15 text-primary"
-                )}>
-                    {getKeyIcon(keyItem)}
-                </div>
-                <div className="min-w-0 flex-1">
-                    <p className="text-sm font-semibold truncate">{keyItem.label}</p>
-                    <p className="text-xs text-muted-foreground">
-                      {t('auth.keyType', { type: getKeyTypeDisplay(keyItem, isMac) })}
-                    </p>
-                </div>
-            </div>
-
-            {/* Export to field */}
-                <div className="space-y-2">
-                    <div className="flex items-center justify-between">
-                        <Label className="text-muted-foreground">{t('keychain.export.exportToRequired')}</Label>
-                        <Button
-                            variant="link"
-                            className="h-auto p-0 text-primary text-sm"
-                            onClick={onShowHostSelector}
-                        >
-                            {t('keychain.export.selectHost')}
-                        </Button>
-                    </div>
-                    <Input
-                        value={exportHost?.label || ''}
-                        readOnly
-                        placeholder={t('keychain.export.selectHostPlaceholder')}
-                        className="bg-muted/50 cursor-pointer"
-                        onClick={onShowHostSelector}
-                    />
-                </div>
-
-            {/* Location field */}
-            <div className="space-y-2">
-                <Label className="text-muted-foreground">{t('keychain.export.locationLabel')}</Label>
-                <Input
-                    value={exportLocation}
-                    onChange={e => setExportLocation(e.target.value)}
-                    placeholder=".ssh"
-                />
-            </div>
-
-            {/* Filename field */}
-            <div className="space-y-2">
-                <Label className="text-muted-foreground">{t('keychain.export.filenameLabel')}</Label>
-                <Input
-                    value={exportFilename}
-                    onChange={e => setExportFilename(e.target.value)}
-                    placeholder="authorized_keys"
-                />
-            </div>
-
-            {/* Info note */}
-            <div className="flex items-start gap-2 p-3 bg-muted/50 border border-border/60 rounded-lg">
-                <Info size={14} className="mt-0.5 text-muted-foreground shrink-0" />
-                <p className="text-xs text-muted-foreground">
-                    {t('keychain.export.note.supportsOnly')}{' '}
-                    <span className="font-semibold text-foreground">UNIX</span>{' '}
-                    {t('keychain.export.note.systems')}{' '}
-                    {t('keychain.export.note.use')}{' '}
-                    <span className="font-semibold text-foreground">{t('keychain.export.advanced')}</span>{' '}
-                    {t('keychain.export.note.customize')}
-                </p>
-            </div>
-
-            {/* Advanced collapsible */}
-            <Collapsible open={exportAdvancedOpen} onOpenChange={setExportAdvancedOpen}>
-                <CollapsibleTrigger asChild>
-                    <Button variant="ghost" className="w-full justify-between px-0 h-10 hover:bg-transparent hover:text-current">
-                        <span className="font-medium">{t('keychain.export.advanced')}</span>
-                        <ChevronRight size={16} className={cn(
-                            "transition-transform",
-                            exportAdvancedOpen && "rotate-90"
-                        )} />
-                    </Button>
-                </CollapsibleTrigger>
-                <CollapsibleContent className="space-y-2 pt-2">
-                    <Label className="text-muted-foreground">{t('keychain.export.scriptRequired')}</Label>
-                    <Textarea
-                        value={exportScript}
-                        onChange={e => setExportScript(e.target.value)}
-                        className="min-h-[180px] font-mono text-xs"
-                        placeholder={t('keychain.export.scriptPlaceholder')}
-                    />
-                </CollapsibleContent>
-            </Collapsible>
-
-            {/* Export button */}
-            <Button
-                className="w-full h-11"
-                disabled={!exportHost || !exportLocation || !exportFilename || isExporting}
-                onClick={handleExport}
-            >
-                {isExporting ? t('keychain.export.exporting') : t('keychain.export.exportAndAttach')}
-            </Button>
-        </>
-    );
-};

components/keychain/index.ts

@@ -15,8 +15,6 @@ export { IdentityCard } from './IdentityCard';
 export { KeyCard } from './KeyCard';
 
 // Panel components
-export { EditKeyPanel } from './EditKeyPanel';
-export { ExportKeyPanel } from './ExportKeyPanel';
 export { GenerateStandardPanel } from './GenerateStandardPanel';
 export { IdentityPanel } from './IdentityPanel';
 export { ImportKeyPanel } from './ImportKeyPanel';

components/settings/tabs/SettingsAppearanceTab.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { Check, Moon, Palette, Sun } from "lucide-react";
+import { Check, Monitor, 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";
@@ -9,8 +9,8 @@ import { SectionHeader, SettingsTabContent, SettingRow, Toggle, Select } from ".
 import { FontSelect } from "../FontSelect";
 
 export default function SettingsAppearanceTab(props: {
-  theme: "dark" | "light";
-  setTheme: (theme: "dark" | "light") => void;
+  theme: "dark" | "light" | "system";
+  setTheme: (theme: "dark" | "light" | "system") => void;
   lightUiThemeId: string;
   setLightUiThemeId: (themeId: string) => void;
   darkUiThemeId: string;
@@ -97,6 +97,12 @@ export default function SettingsAppearanceTab(props: {
     { name: "Slate", value: "215 16% 47%" },
   ];
 
+  const THEME_OPTIONS: { value: "light" | "system" | "dark"; icon: React.ReactNode; label: string }[] = [
+    { value: "light", icon: <Sun size={14} />, label: t("settings.appearance.theme.light") },
+    { value: "system", icon: <Monitor size={14} />, label: t("settings.appearance.theme.system") },
+    { value: "dark", icon: <Moon size={14} />, label: t("settings.appearance.theme.dark") },
+  ];
+
   const renderThemeSwatches = (
     options: { id: string; name: string; tokens: { background: string } }[],
     value: string,
@@ -153,13 +159,25 @@ export default function SettingsAppearanceTab(props: {
       <SectionHeader title={t("settings.appearance.uiTheme")} />
       <div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
         <SettingRow
-          label={t("settings.appearance.darkMode")}
-          description={t("settings.appearance.darkMode.desc")}
+          label={t("settings.appearance.theme")}
+          description={t("settings.appearance.theme.desc")}
         >
-          <div className="flex items-center gap-2">
-            <Sun size={14} className="text-muted-foreground" />
-            <Toggle checked={theme === "dark"} onChange={(v) => setTheme(v ? "dark" : "light")} />
-            <Moon size={14} className="text-muted-foreground" />
+          <div className="flex items-center rounded-lg border border-border bg-muted/50 p-0.5">
+            {THEME_OPTIONS.map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => setTheme(opt.value)}
+                className={cn(
+                  "flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium transition-colors",
+                  theme === opt.value
+                    ? "bg-background text-foreground shadow-sm"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                {opt.icon}
+                {opt.label}
+              </button>
+            ))}
           </div>
         </SettingRow>
       </div>

components/settings/tabs/SettingsSyncTab.tsx

@@ -1,51 +1,77 @@
 import React, { useCallback } from "react";
-import type { Host, Identity, Snippet, SSHKey } from "../../../domain/models";
+import type { PortForwardingRule } from "../../../domain/models";
 import type { SyncPayload } from "../../../domain/sync";
+import { buildSyncPayload, applySyncPayload } from "../../../domain/syncPayload";
+import type { SyncableVaultData } from "../../../domain/syncPayload";
+import { STORAGE_KEY_PORT_FORWARDING } from "../../../infrastructure/config/storageKeys";
+import { localStorageAdapter } from "../../../infrastructure/persistence/localStorageAdapter";
+import { getEffectiveKnownHosts } from "../../../infrastructure/syncHelpers";
 import { CloudSyncSettings } from "../../CloudSyncSettings";
 import { SettingsTabContent } from "../settings-ui";
 
 export default function SettingsSyncTab(props: {
-  hosts: Host[];
-  keys: SSHKey[];
-  identities: Identity[];
-  snippets: Snippet[];
+  vault: SyncableVaultData;
+  portForwardingRules: PortForwardingRule[];
   importDataFromString: (data: string) => void;
+  importPortForwardingRules: (rules: PortForwardingRule[]) => void;
   clearVaultData: () => void;
 }) {
-  const { hosts, keys, identities, snippets, importDataFromString, clearVaultData } = props;
+  const {
+    vault,
+    portForwardingRules,
+    importDataFromString,
+    importPortForwardingRules,
+    clearVaultData,
+  } = props;
 
-  const buildSyncPayload = useCallback((): SyncPayload => {
-    return {
-      hosts,
-      keys,
-      identities,
-      snippets,
-      customGroups: [],
-      syncedAt: Date.now(),
-    };
-  }, [hosts, keys, identities, snippets]);
-
-  const applySyncPayload = useCallback(
-    (payload: SyncPayload) => {
-      importDataFromString(
-        JSON.stringify({
-          hosts: payload.hosts,
-          keys: payload.keys,
-          identities: payload.identities,
-          snippets: payload.snippets,
-          customGroups: payload.customGroups,
-        }),
+  const onBuildPayload = useCallback((): SyncPayload => {
+    // If hook state is empty but localStorage has data, the async store
+    // initialization hasn't finished yet.  Read from localStorage directly
+    // to avoid uploading empty arrays and overwriting the remote snapshot.
+    let effectiveRules = portForwardingRules;
+    if (effectiveRules.length === 0) {
+      const stored = localStorageAdapter.read<PortForwardingRule[]>(
+        STORAGE_KEY_PORT_FORWARDING,
       );
+      if (stored && Array.isArray(stored) && stored.length > 0) {
+        // Strip transient per-device fields (status, error, lastUsedAt)
+        // that setGlobalRules persists to localStorage but shouldn't be
+        // included in the cloud sync snapshot.
+        effectiveRules = stored.map(({ status: _status, error: _error, ...rest }) => ({
+          ...rest,
+          status: "inactive" as const,
+          error: undefined,
+          lastUsedAt: undefined,
+        }));
+      }
+    }
+
+    const effectiveKnownHosts = getEffectiveKnownHosts(vault.knownHosts);
+
+    return buildSyncPayload({ ...vault, knownHosts: effectiveKnownHosts }, effectiveRules);
+  }, [vault, portForwardingRules]);
+
+  const onApplyPayload = useCallback(
+    (payload: SyncPayload) => {
+      applySyncPayload(payload, {
+        importVaultData: importDataFromString,
+        importPortForwardingRules,
+      });
     },
-    [importDataFromString],
+    [importDataFromString, importPortForwardingRules],
   );
 
+  const clearAllLocalData = useCallback(() => {
+    clearVaultData();
+    importPortForwardingRules([]);
+  }, [clearVaultData, importPortForwardingRules]);
+
   return (
     <SettingsTabContent value="sync">
       <CloudSyncSettings
-        onBuildPayload={buildSyncPayload}
-        onApplyPayload={applySyncPayload}
-        onClearLocalData={clearVaultData}
+        onBuildPayload={onBuildPayload}
+        onApplyPayload={onApplyPayload}
+        onClearLocalData={clearAllLocalData}
       />
     </SettingsTabContent>
   );

components/settings/tabs/SettingsSystemTab.tsx

@@ -1,11 +1,12 @@
 /**
  * Settings System Tab - System information, temp file management, session logs, and global hotkey
  */
-import { FileText, FolderOpen, HardDrive, Keyboard, RefreshCw, RotateCcw, Trash2 } from "lucide-react";
+import { Download, ExternalLink, FileText, FolderOpen, HardDrive, Keyboard, RefreshCw, RotateCcw, Trash2 } from "lucide-react";
 import React, { useCallback, useEffect, useState } from "react";
 import { useI18n } from "../../../application/i18n/I18nProvider";
 import { getCredentialProtectionAvailability } from "../../../infrastructure/services/credentialProtection";
 import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
+import type { UpdateState } from '../../../application/state/useUpdateCheck';
 import { SessionLogFormat, keyEventToString } from "../../../domain/models";
 import { TabsContent } from "../../ui/tabs";
 import { Button } from "../../ui/button";
@@ -26,6 +27,22 @@ function formatBytes(bytes: number): string {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
 }
 
+/** Returns a locale-agnostic relative time string for the given timestamp. */
+function formatLastChecked(
+  timestamp: number | null,
+  t: (key: string) => string,
+): string {
+  if (!timestamp) return '';
+  const diffMs = Date.now() - timestamp;
+  if (diffMs < 0) return t('settings.update.lastCheckedJustNow');
+  const diffMins = Math.floor(diffMs / 60000);
+  if (diffMins < 1) return t('settings.update.lastCheckedJustNow');
+  if (diffMins < 60)
+    return t('settings.update.lastCheckedMinutesAgo').replace('{n}', String(diffMins));
+  const diffHours = Math.floor(diffMins / 60);
+  return t('settings.update.lastCheckedHoursAgo').replace('{n}', String(diffHours));
+}
+
 interface SettingsSystemTabProps {
   sessionLogsEnabled: boolean;
   setSessionLogsEnabled: (enabled: boolean) => void;
@@ -38,6 +55,11 @@ interface SettingsSystemTabProps {
   closeToTray: boolean;
   setCloseToTray: (enabled: boolean) => void;
   hotkeyRegistrationError: string | null;
+  // Unified update state — from useUpdateCheck hook in SettingsPageContent
+  updateState: UpdateState;
+  checkNow: () => Promise<unknown>;
+  installUpdate: () => void;
+  openReleasePage: () => void;
 }
 
 const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
@@ -52,6 +74,10 @@ const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
   closeToTray,
   setCloseToTray,
   hotkeyRegistrationError,
+  updateState,
+  checkNow,
+  installUpdate,
+  openReleasePage,
 }) => {
   const { t } = useI18n();
   const isMac = typeof navigator !== "undefined" && /Mac/i.test(navigator.platform);
@@ -65,6 +91,18 @@ const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
   const [credentialsAvailable, setCredentialsAvailable] = useState<boolean | null>(null);
   const [isCheckingCredentials, setIsCheckingCredentials] = useState(false);
 
+  const [appVersion, setAppVersion] = useState('');
+
+  // Load app version on mount
+  useEffect(() => {
+    const promise = netcattyBridge.get()?.getAppInfo?.();
+    if (promise) {
+      promise.then((info) => {
+        setAppVersion(info?.version ?? '');
+      }).catch(() => {});
+    }
+  }, []);
+
   const loadTempDirInfo = useCallback(async () => {
     const bridge = netcattyBridge.get();
     if (!bridge?.getTempDirInfo) return;
@@ -218,6 +256,129 @@ const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
             </p>
           </div>
 
+          {/* Software Update Section */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <Download size={18} className="text-muted-foreground" />
+              <h3 className="text-base font-medium">{t('settings.update.title')}</h3>
+            </div>
+            <div className="rounded-lg border border-border/60 p-4 space-y-3">
+              {/* Current version */}
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-muted-foreground">
+                  {t('settings.update.currentVersion')}
+                </span>
+                <span className="text-sm font-mono">
+                  {updateState.currentVersion || appVersion || '...'}
+                </span>
+              </div>
+
+              {/* Status message — priority: autoDownloadStatus > isChecking/manualCheckStatus */}
+              {updateState.autoDownloadStatus === 'downloading' && (
+                <div className="space-y-2">
+                  <p className="text-sm text-muted-foreground">
+                    {t('settings.update.downloading').replace('{percent}', String(updateState.downloadPercent))}
+                  </p>
+                  <div className="h-2 w-full rounded-full bg-muted overflow-hidden">
+                    <div
+                      className="h-full rounded-full bg-primary transition-all duration-300"
+                      style={{ width: `${updateState.downloadPercent}%` }}
+                    />
+                  </div>
+                </div>
+              )}
+              {updateState.autoDownloadStatus === 'ready' && (
+                <p className="text-sm text-green-600 dark:text-green-400">
+                  {t('settings.update.readyToInstall')}
+                </p>
+              )}
+              {updateState.autoDownloadStatus === 'error' && (
+                <p className="text-sm text-destructive">
+                  {updateState.downloadError || t('settings.update.error')}
+                </p>
+              )}
+              {updateState.autoDownloadStatus === 'idle' && (
+                <>
+                  {updateState.manualCheckStatus === 'up-to-date' && (
+                    <p className="text-sm text-green-600 dark:text-green-400">
+                      {t('settings.update.upToDate')}
+                    </p>
+                  )}
+                  {(updateState.manualCheckStatus === 'available' || (updateState.manualCheckStatus === 'idle' && updateState.hasUpdate)) && (
+                    <p className="text-sm text-blue-600 dark:text-blue-400">
+                      {t('settings.update.available').replace(
+                        '{version}',
+                        updateState.latestRelease?.version ?? ''
+                      )}
+                    </p>
+                  )}
+                  {updateState.manualCheckStatus === 'error' && (
+                    <p className="text-sm text-destructive">
+                      {updateState.error || t('settings.update.error')}
+                    </p>
+                  )}
+                </>
+              )}
+
+              {/* Action buttons */}
+              <div className="flex items-center gap-2 pt-1">
+                {/* Checking spinner — shown when isChecking OR manualCheckStatus=checking, but no active download */}
+                {(updateState.autoDownloadStatus === 'idle' || updateState.autoDownloadStatus === 'error') &&
+                  (updateState.isChecking || updateState.manualCheckStatus === 'checking') ? (
+                  <Button variant="outline" size="sm" disabled>
+                    <RefreshCw size={14} className="mr-1.5 animate-spin" />
+                    {t('settings.update.checking')}
+                  </Button>
+                ) : (updateState.autoDownloadStatus === 'idle' || updateState.autoDownloadStatus === 'error') ? (
+                  /* Check button — shown in idle states and in error state (allows retry) */
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => void checkNow()}
+                  >
+                    <RefreshCw size={14} className="mr-1.5" />
+                    {t('settings.update.checkForUpdates')}
+                  </Button>
+                ) : null}
+
+                {/* Install button — shown when download is complete */}
+                {updateState.autoDownloadStatus === 'ready' && (
+                  <Button variant="default" size="sm" onClick={installUpdate}>
+                    <RotateCcw size={14} className="mr-1.5" />
+                    {t('settings.update.restartNow')}
+                  </Button>
+                )}
+
+                {/* Open releases — shown on download error */}
+                {updateState.autoDownloadStatus === 'error' && (
+                  <Button variant="ghost" size="sm" onClick={openReleasePage}>
+                    <ExternalLink size={14} className="mr-1.5" />
+                    {t('settings.update.manualDownload')}
+                  </Button>
+                )}
+
+                {/* Open releases — shown when update found on unsupported platform, or on check error */}
+                {updateState.autoDownloadStatus === 'idle' &&
+                  (updateState.manualCheckStatus === 'available' || updateState.manualCheckStatus === 'error' || (updateState.manualCheckStatus === 'idle' && updateState.hasUpdate)) && (
+                  <Button variant="ghost" size="sm" onClick={openReleasePage}>
+                    <ExternalLink size={14} className="mr-1.5" />
+                    {t('settings.update.manualDownload')}
+                  </Button>
+                )}
+              </div>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {updateState.lastCheckedAt && (
+                <span>
+                  {t('settings.update.lastCheckedPrefix')}
+                  {formatLastChecked(updateState.lastCheckedAt, t)}
+                  {'　'}
+                </span>
+              )}
+              {t('settings.update.hint')}
+            </p>
+          </div>
+
           {/* Credential Protection Section */}
           <div className="space-y-4">
             <div className="flex items-center gap-2">

components/sftp-modal/SftpModalFileList.tsx

@@ -17,7 +17,8 @@ interface SftpModalFileListProps {
   t: (key: string, params?: Record<string, unknown>) => string;
   currentPath: string;
   isLocalSession: boolean;
-  files: RemoteFile[];
+  hasFiles: boolean;
+  hasDisplayFiles: boolean;
   selectedFiles: Set<string>;
   dragActive: boolean;
   loading: boolean;
@@ -60,7 +61,8 @@ export const SftpModalFileList: React.FC<SftpModalFileListProps> = ({
   t,
   currentPath,
   isLocalSession,
-  files,
+  hasFiles,
+  hasDisplayFiles,
   selectedFiles,
   dragActive,
   loading,
@@ -169,7 +171,7 @@ export const SftpModalFileList: React.FC<SftpModalFileListProps> = ({
         </div>
       )}
 
-      {loading && files.length === 0 && (
+      {loading && !hasFiles && (
         <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>
@@ -200,7 +202,7 @@ export const SftpModalFileList: React.FC<SftpModalFileListProps> = ({
         </div>
       )}
 
-      {files.length === 0 && !loading && (
+      {!hasDisplayFiles && !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>

components/sftp-modal/SftpModalHeader.tsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useState } from "react";
-import { ArrowUp, Bookmark, Check, ChevronRight, FilePlus, FolderPlus, FolderUp, Home, Languages, MoreHorizontal, RefreshCw, Trash2, Upload } from "lucide-react";
+import { ArrowUp, Bookmark, Check, ChevronRight, Eye, EyeOff, FilePlus, FolderPlus, FolderUp, Home, Languages, MoreHorizontal, RefreshCw, Trash2, Upload, X } from "lucide-react";
 import { cn } from "../../lib/utils";
 import type { Host, SftpFilenameEncoding } from "../../types";
 import { useSftpBookmarks } from "../sftp/hooks/useSftpBookmarks";
 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";
@@ -51,8 +50,11 @@ interface SftpModalHeaderProps {
   onCreateFile: () => void;
   onFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onFolderSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  showHiddenFiles: boolean;
+  onToggleShowHiddenFiles: () => void;
   onUpdateHost?: (host: Host) => void;
   onNavigateToBookmark?: (path: string) => void;
+  onClose?: () => void;
 }
 
 export const SftpModalHeader: React.FC<SftpModalHeaderProps> = ({
@@ -91,8 +93,11 @@ export const SftpModalHeader: React.FC<SftpModalHeaderProps> = ({
   onCreateFile,
   onFileSelect,
   onFolderSelect,
+  showHiddenFiles,
+  onToggleShowHiddenFiles,
   onUpdateHost,
   onNavigateToBookmark,
+  onClose,
 }) => {
   // Delay tooltip activation to prevent flickering when modal opens
   const [tooltipsReady, setTooltipsReady] = useState(false);
@@ -122,24 +127,35 @@ export const SftpModalHeader: React.FC<SftpModalHeaderProps> = ({
 
   return (
     <>
-      <DialogHeader className="px-4 py-3 border-b border-border/60 flex-shrink-0">
-        <div className="flex items-center gap-3 pr-8">
+      <div className="px-4 py-3 border-b border-border/60 flex-shrink-0">
+        <div className="flex items-center gap-3">
           <DistroAvatar
             host={host}
             fallback={host.label.slice(0, 2).toUpperCase()}
             className="h-8 w-8"
+            size="sm"
           />
           <div className="flex-1 min-w-0">
-            <DialogTitle className="text-sm font-semibold">
+            <div className="text-sm font-semibold">
               {host.label}
-            </DialogTitle>
+            </div>
             <div className="text-xs text-muted-foreground font-mono">
               {credentials.username || "root"}@{credentials.hostname}:
               {credentials.port || 22}
             </div>
           </div>
+          {onClose && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-6 w-6 shrink-0"
+              onClick={onClose}
+            >
+              <X size={14} />
+            </Button>
+          )}
         </div>
-      </DialogHeader>
+      </div>
 
       <TooltipProvider delayDuration={500} skipDelayDuration={800} disableHoverableContent>
         <div className="px-4 py-2 border-b border-border/60 flex items-center gap-2 flex-shrink-0 bg-muted/30">
@@ -302,6 +318,22 @@ export const SftpModalHeader: React.FC<SftpModalHeaderProps> = ({
               </PopoverContent>
             </Popover>
           )}
+          <Tooltip
+            open={openTooltip === 'showHiddenFiles'}
+            onOpenChange={handleTooltipOpenChange('showHiddenFiles')}
+          >
+            <TooltipTrigger asChild>
+              <Button
+                variant={showHiddenFiles ? "secondary" : "ghost"}
+                size="icon"
+                className={cn("h-7 w-7", showHiddenFiles && "text-primary")}
+                onClick={onToggleShowHiddenFiles}
+              >
+                {showHiddenFiles ? <EyeOff size={14} /> : <Eye size={14} />}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("settings.sftp.showHiddenFiles")}</TooltipContent>
+          </Tooltip>
 
           <div className="flex items-center gap-1 text-sm flex-1 min-w-0 overflow-hidden">
             {isEditingPath ? (

components/sftp-modal/SftpModalUploadTasks.tsx

@@ -13,6 +13,7 @@ interface TransferTask {
   status: "pending" | "uploading" | "downloading" | "completed" | "failed" | "cancelled";
   error?: string;
   direction: "upload" | "download";
+  targetPath?: string;
 }
 
 interface SftpModalUploadTasksProps {
@@ -166,6 +167,9 @@ export const SftpModalUploadTasks: React.FC<SftpModalUploadTasksProps> = ({ task
                 {task.status === "completed" && (
                   <div className="text-[10px] text-green-600 mt-0.5">
                     {t(task.direction === "download" ? "sftp.download.completed" : "sftp.upload.completed")} - {formatBytes(task.totalBytes)}
+                    {task.targetPath && (
+                      <span className="text-muted-foreground ml-1">→ {task.targetPath}</span>
+                    )}
                   </div>
                 )}
                 {task.status === "cancelled" && (

components/sftp-modal/hooks/useSftpModalSession.ts

@@ -53,6 +53,7 @@ interface UseSftpModalSessionParams {
 interface UseSftpModalSessionResult {
   currentPath: string;
   setCurrentPath: (path: string) => void;
+  currentPathRef: React.MutableRefObject<string>;
   files: RemoteFile[];
   setFiles: (files: RemoteFile[]) => void;
   loading: boolean;
@@ -88,6 +89,7 @@ export const useSftpModalSession = ({
   const sftpIdRef = useRef<string | null>(null);
   const closingPromiseRef = useRef<Promise<void> | null>(null);
   const initializedRef = useRef(false);
+  const initializingRef = useRef(false);
   const lastInitialPathRef = useRef<string | undefined>(undefined);
   const localHomeRef = useRef<string | null>(null);
 
@@ -315,92 +317,109 @@ export const useSftpModalSession = ({
     if (open) {
       if (!initializedRef.current || lastInitialPathRef.current !== initialPath) {
         initializedRef.current = true;
+        initializingRef.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",
-              );
+              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);
+              }
             } finally {
-              setLoading(false);
+              initializingRef.current = 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 /`);
+            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, "/");
-              setCurrentPath("/");
+              const list = await listSftp(sftpId, homePath || "/");
+              setCurrentPath(homePath || "/");
               setFiles(list);
-              dirCacheRef.current.set(`${host.id}::/`, {
+              dirCacheRef.current.set(`${host.id}::${homePath || "/"}`, {
                 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);
+            } 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);
+              }
             }
+          } finally {
+            initializingRef.current = false;
           }
         })();
         return;
       }
-      void loadFiles(currentPath);
+      // Skip redundant loadFiles while async initialization is still in flight.
+      // Without this guard, dependency changes (e.g. loadFiles recreation from
+      // files.length change) can re-trigger this effect and call loadFiles with
+      // the stale currentPath before the initialization IIFE has resolved and
+      // updated currentPathRef — causing uploads to target the wrong directory.
+      if (!initializingRef.current) {
+        void loadFiles(currentPath);
+      }
     } else {
       loadSeqRef.current += 1;
       initializedRef.current = false;
+      initializingRef.current = false;
     }
   }, [
     closeSftpSession,
@@ -428,6 +447,7 @@ export const useSftpModalSession = ({
   return {
     currentPath,
     setCurrentPath,
+    currentPathRef,
     files,
     setFiles,
     loading,

components/sftp-modal/hooks/useSftpModalTransfers.ts

@@ -27,6 +27,7 @@ interface TransferTask {
   fileCount?: number;
   completedCount?: number;
   direction: "upload" | "download";
+  targetPath?: string;
 }
 
 // Keep UploadTask as alias for backwards compatibility
@@ -34,6 +35,7 @@ type UploadTask = TransferTask;
 
 interface UseSftpModalTransfersParams {
   currentPath: string;
+  currentPathRef: React.MutableRefObject<string>;
   isLocalSession: boolean;
   joinPath: (base: string, name: string) => string;
   ensureSftp: () => Promise<string>;
@@ -98,6 +100,7 @@ interface UseSftpModalTransfersResult {
 
 export const useSftpModalTransfers = ({
   currentPath,
+  currentPathRef,
   isLocalSession,
   joinPath,
   ensureSftp,
@@ -213,8 +216,16 @@ export const useSftpModalTransfers = ({
     };
   }, [writeLocalFile, mkdirLocal, mkdirSftp, writeSftpBinary, writeSftpBinaryWithProgress, cancelSftpUpload, startStreamTransfer, cancelTransfer]);
 
+  const refreshTargetPathIfCurrent = useCallback(
+    async (targetPath: string) => {
+      if (currentPathRef.current !== targetPath) return;
+      await loadFiles(targetPath, { force: true });
+    },
+    [currentPathRef, loadFiles],
+  );
+
   // Create upload callbacks
-  const createUploadCallbacks = useCallback((): UploadCallbacks => {
+  const createUploadCallbacks = useCallback((targetPath: string): UploadCallbacks => {
     return {
       onScanningStart: (taskId: string) => {
         const scanningTask: UploadTask = {
@@ -246,6 +257,7 @@ export const useSftpModalTransfers = ({
           startTime: Date.now(),
           isDirectory: task.isDirectory,
           direction: "upload",
+          targetPath,
         };
         setUploadTasks(prev => [...prev, uploadTask]);
       },
@@ -348,11 +360,13 @@ export const useSftpModalTransfers = ({
   // Helper function to perform upload with compression setting from user preference
   const performUpload = useCallback(async (
     files: FileList | File[],
-    useCompressed: boolean
+    useCompressed: boolean,
+    targetPathOverride?: string,
   ): Promise<void> => {
     if (files.length === 0) return;
 
     setUploading(true);
+    const targetPath = targetPathOverride ?? currentPathRef.current;
 
     // Get SFTP ID for remote sessions
     let sftpId: string | null = null;
@@ -365,13 +379,13 @@ export const useSftpModalTransfers = ({
     const controller = new UploadController();
     uploadControllerRef.current = controller;
 
-    const callbacks = createUploadCallbacks();
+    const callbacks = createUploadCallbacks(targetPath);
 
     try {
       await uploadFromFileList(
         files,
         {
-          targetPath: currentPath,
+          targetPath,
           sftpId,
           isLocal: isLocalSession,
           bridge: createUploadBridge,
@@ -382,7 +396,7 @@ export const useSftpModalTransfers = ({
         controller
       );
 
-      await loadFiles(currentPath, { force: true });
+      await refreshTargetPathIfCurrent(targetPath);
     } catch (error) {
       toast.error(
         error instanceof Error ? error.message : t("sftp.error.uploadFailed"),
@@ -394,7 +408,7 @@ export const useSftpModalTransfers = ({
       uploadControllerRef.current = null;
       cachedSftpIdRef.current = null;
     }
-  }, [currentPath, createUploadBridge, createUploadCallbacks, ensureSftp, isLocalSession, joinPath, loadFiles, t]);
+  }, [createUploadBridge, createUploadCallbacks, currentPathRef, ensureSftp, isLocalSession, joinPath, refreshTargetPathIfCurrent, t]);
 
   const handleDownload = useCallback(
     async (file: RemoteFile) => {
@@ -818,6 +832,7 @@ export const useSftpModalTransfers = ({
   const handleUploadFromDrop = useCallback(
     async (dataTransfer: DataTransfer) => {
       setUploading(true);
+      const targetPath = currentPathRef.current;
 
       // Get SFTP ID for remote sessions
       let sftpId: string | null = null;
@@ -830,13 +845,13 @@ export const useSftpModalTransfers = ({
       const controller = new UploadController();
       uploadControllerRef.current = controller;
 
-      const callbacks = createUploadCallbacks();
+      const callbacks = createUploadCallbacks(targetPath);
 
       try {
         await uploadFromDataTransfer(
           dataTransfer,
           {
-            targetPath: currentPath,
+            targetPath,
             sftpId,
             isLocal: isLocalSession,
             bridge: createUploadBridge,
@@ -847,7 +862,7 @@ export const useSftpModalTransfers = ({
           controller
         );
 
-        await loadFiles(currentPath, { force: true });
+        await refreshTargetPathIfCurrent(targetPath);
       } catch (error) {
         toast.error(
           error instanceof Error ? error.message : t("sftp.error.uploadFailed"),
@@ -860,7 +875,7 @@ export const useSftpModalTransfers = ({
         cachedSftpIdRef.current = null;
       }
     },
-    [currentPath, createUploadBridge, createUploadCallbacks, ensureSftp, isLocalSession, joinPath, loadFiles, t, useCompressedUpload],
+    [createUploadBridge, createUploadCallbacks, currentPathRef, ensureSftp, isLocalSession, joinPath, refreshTargetPathIfCurrent, t, useCompressedUpload],
   );
 
   // Handle upload from DropEntry array (used for drag-and-drop to terminal)
@@ -869,6 +884,7 @@ export const useSftpModalTransfers = ({
       if (entries.length === 0) return;
 
       setUploading(true);
+      const targetPath = currentPathRef.current;
 
       // Get SFTP ID for remote sessions
       let sftpId: string | null = null;
@@ -881,13 +897,13 @@ export const useSftpModalTransfers = ({
       const controller = new UploadController();
       uploadControllerRef.current = controller;
 
-      const callbacks = createUploadCallbacks();
+      const callbacks = createUploadCallbacks(targetPath);
 
       try {
         await uploadEntriesDirect(
           entries,
           {
-            targetPath: currentPath,
+            targetPath,
             sftpId,
             isLocal: isLocalSession,
             bridge: createUploadBridge,
@@ -898,7 +914,7 @@ export const useSftpModalTransfers = ({
           controller
         );
 
-        await loadFiles(currentPath, { force: true });
+        await refreshTargetPathIfCurrent(targetPath);
       } catch (error) {
         toast.error(
           error instanceof Error ? error.message : t("sftp.error.uploadFailed"),
@@ -911,7 +927,7 @@ export const useSftpModalTransfers = ({
         cachedSftpIdRef.current = null;
       }
     },
-    [currentPath, createUploadBridge, createUploadCallbacks, ensureSftp, isLocalSession, joinPath, loadFiles, t, useCompressedUpload],
+    [createUploadBridge, createUploadCallbacks, currentPathRef, ensureSftp, isLocalSession, joinPath, refreshTargetPathIfCurrent, t, useCompressedUpload],
   );
 
   // Handle upload from File array (used by file input after copying files)

components/sftp/SftpContext.tsx

@@ -98,9 +98,6 @@ export interface SftpContextValue {
     // Callbacks for each side
     leftCallbacks: SftpPaneCallbacks;
     rightCallbacks: SftpPaneCallbacks;
-
-    // Settings
-    showHiddenFiles: boolean;
 }
 
 const SftpContext = createContext<SftpContextValue | null>(null);
@@ -140,12 +137,6 @@ export const useSftpUpdateHosts = () => {
     return context.updateHosts;
 };
 
-// Hook to get showHiddenFiles setting
-export const useSftpShowHiddenFiles = (): boolean => {
-    const context = useSftpContext();
-    return context.showHiddenFiles;
-};
-
 interface SftpContextProviderProps {
     hosts: Host[];
     updateHosts: (hosts: Host[]) => void;
@@ -153,7 +144,6 @@ interface SftpContextProviderProps {
     dragCallbacks: SftpDragCallbacks;
     leftCallbacks: SftpPaneCallbacks;
     rightCallbacks: SftpPaneCallbacks;
-    showHiddenFiles: boolean;
     children: React.ReactNode;
 }
 
@@ -164,7 +154,6 @@ export const SftpContextProvider: React.FC<SftpContextProviderProps> = ({
     dragCallbacks,
     leftCallbacks,
     rightCallbacks,
-    showHiddenFiles,
     children,
 }) => {
     // Memoize the context value to prevent unnecessary re-renders
@@ -177,9 +166,8 @@ export const SftpContextProvider: React.FC<SftpContextProviderProps> = ({
             dragCallbacks,
             leftCallbacks,
             rightCallbacks,
-            showHiddenFiles,
         }),
-        [hosts, updateHosts, draggedFiles, dragCallbacks, leftCallbacks, rightCallbacks, showHiddenFiles],
+        [hosts, updateHosts, draggedFiles, dragCallbacks, leftCallbacks, rightCallbacks],
     );
 
     return <SftpContext.Provider value={value}>{children}</SftpContext.Provider>;

components/sftp/SftpOverlays.tsx

@@ -2,10 +2,10 @@ 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";
+import { SftpConflictDialog, SftpHostPicker, SftpPermissionsDialog } from "./index";
+import { SftpTransferQueue } from "./SftpTransferQueue";
 
 type SftpState = ReturnType<typeof useSftpState>;
 
@@ -13,6 +13,7 @@ interface SftpOverlaysProps {
   hosts: Host[];
   sftp: SftpState;
   visibleTransfers: SftpState["transfers"];
+  showTransferQueue?: boolean;
   showHostPickerLeft: boolean;
   showHostPickerRight: boolean;
   hostSearchLeft: string;
@@ -46,6 +47,7 @@ export const SftpOverlays: React.FC<SftpOverlaysProps> = ({
   hosts,
   sftp,
   visibleTransfers,
+  showTransferQueue = true,
   showHostPickerLeft,
   showHostPickerRight,
   hostSearchLeft,
@@ -98,49 +100,8 @@ export const SftpOverlays: React.FC<SftpOverlaysProps> = ({
         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>
+      {showTransferQueue && (
+        <SftpTransferQueue sftp={sftp} visibleTransfers={visibleTransfers} />
       )}
 
       <SftpConflictDialog

components/sftp/SftpPaneFileList.tsx

@@ -411,7 +411,7 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
 
     {/* 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">
+      <div className="absolute inset-0 flex items-center justify-center bg-background/40 backdrop-blur-[1px] z-10">
         <Loader2 size={24} className="animate-spin text-muted-foreground" />
       </div>
     )}

components/sftp/SftpPaneToolbar.tsx

@@ -1,9 +1,11 @@
-import React from "react";
-import { Bookmark, Check, ChevronLeft, FilePlus, Folder, FolderPlus, Home, Languages, RefreshCw, Search, Trash2, X } from "lucide-react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Bookmark, Check, Eye, EyeOff, FilePlus, Folder, FolderPlus, Home, Languages, MoreHorizontal, RefreshCw, Search, TerminalSquare, Trash2, X } from "lucide-react";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Popover, PopoverClose, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Dropdown, DropdownContent, DropdownTrigger } from "../ui/dropdown";
 import { cn } from "../../lib/utils";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
 import { SftpBreadcrumb } from "./index";
 import type { SftpFilenameEncoding } from "../../types";
 import type { SftpPane } from "../../application/state/sftp/types";
@@ -12,7 +14,6 @@ import type { SftpBookmark } from "../../domain/models";
 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;
@@ -47,12 +48,19 @@ interface SftpPaneToolbarProps {
   onToggleBookmark: () => void;
   onNavigateToBookmark: (path: string) => void;
   onDeleteBookmark: (id: string) => void;
+  showHiddenFiles: boolean;
+  onToggleShowHiddenFiles?: () => void;
+  onGoToTerminalCwd?: () => void;
 }
 
+// Prioritize breadcrumb path display. 6 action buttons need ~156px,
+// bookmark ~20px, padding ~16px. Collapse early so the breadcrumb
+// always gets at least ~200px of space.
+const COLLAPSE_WIDTH = 400;
+
 export const SftpPaneToolbar: React.FC<SftpPaneToolbarProps> = ({
   t,
   pane,
-  onNavigateUp,
   onNavigateTo,
   onSetFilter,
   onSetFilenameEncoding,
@@ -86,299 +94,488 @@ export const SftpPaneToolbar: React.FC<SftpPaneToolbarProps> = ({
   onToggleBookmark,
   onNavigateToBookmark,
   onDeleteBookmark,
-}) => (
-  <>
-    {/* 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>
+  showHiddenFiles,
+  onToggleShowHiddenFiles,
+  onGoToTerminalCwd,
+}) => {
+  const outerRef = useRef<HTMLDivElement>(null);
+  const [collapsed, setCollapsed] = useState(false);
 
-      {/* 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>
-      )}
+  // Observe the overall toolbar width to decide whether to collapse action buttons
+  useEffect(() => {
+    const el = outerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setCollapsed(entry.contentRect.width < COLLAPSE_WIDTH);
+      }
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
 
-      {/* Bookmark button with dropdown */}
-      <Popover>
-          <PopoverTrigger asChild>
+  const handleNewFolder = useCallback(() => {
+    setNewFolderName("");
+    setShowNewFolderDialog(true);
+  }, [setNewFolderName, setShowNewFolderDialog]);
+
+  const handleNewFile = useCallback(() => {
+    const defaultName = getNextUntitledName(pane.files.map(f => f.name));
+    setNewFileName(defaultName);
+    setFileNameError(null);
+    setShowNewFileDialog(true);
+  }, [getNextUntitledName, pane.files, setNewFileName, setFileNameError, setShowNewFileDialog]);
+
+  const handleToggleFilter = useCallback(() => {
+    setShowFilterBar(!showFilterBar);
+    if (!showFilterBar) {
+      setTimeout(() => filterInputRef.current?.focus(), 0);
+    }
+  }, [showFilterBar, setShowFilterBar, filterInputRef]);
+
+  const isRemote = !pane.connection?.isLocal;
+
+  // Buttons that always remain visible (not collapsed)
+  const pinnedButtons = (
+    <>
+      {onGoToTerminalCwd && (
+        <Tooltip>
+          <TooltipTrigger asChild>
             <Button
               variant="ghost"
               size="icon"
-              className={cn("h-5 w-5 shrink-0", isCurrentPathBookmarked && "text-yellow-500")}
-              title={isCurrentPathBookmarked ? t("sftp.bookmark.remove") : t("sftp.bookmark.add")}
-              onClick={(e) => {
-                // If not bookmarked, toggle directly instead of opening popover
-                if (!isCurrentPathBookmarked && bookmarks.length === 0) {
-                  e.preventDefault();
-                  onToggleBookmark();
-                }
-              }}
+              className="h-6 w-6"
+              onClick={onGoToTerminalCwd}
             >
-              <Bookmark size={12} fill={isCurrentPathBookmarked ? "currentColor" : "none"} />
+              <TerminalSquare size={14} />
             </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-64 p-0" align="start">
-            <div className="p-2 border-b border-border/40">
-              <Button
-                variant={isCurrentPathBookmarked ? "secondary" : "ghost"}
-                size="sm"
-                className="w-full justify-start text-xs h-7"
-                onClick={onToggleBookmark}
-              >
-                <Bookmark size={12} fill={isCurrentPathBookmarked ? "currentColor" : "none"} className={cn("mr-2", isCurrentPathBookmarked && "text-yellow-500")} />
-                {isCurrentPathBookmarked ? t("sftp.bookmark.remove") : t("sftp.bookmark.add")}
-              </Button>
-            </div>
-            {bookmarks.length > 0 ? (
-              <div className="max-h-48 overflow-auto py-1">
-                {bookmarks.map((bm) => (
-                  <div
-                    key={bm.id}
-                    className="flex items-center gap-1 px-2 py-1 hover:bg-secondary/60 group"
-                  >
-                    <button
-                      type="button"
-                      className="flex-1 text-left text-xs truncate font-mono"
-                      onClick={() => onNavigateToBookmark(bm.path)}
-                      title={bm.path}
-                    >
-                      {bm.label}
-                      <span className="ml-1.5 text-muted-foreground text-[10px]">{bm.path}</span>
-                    </button>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-5 w-5 opacity-0 group-hover:opacity-100 shrink-0 text-muted-foreground hover:text-destructive"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onDeleteBookmark(bm.id);
-                      }}
-                    >
-                      <Trash2 size={10} />
-                    </Button>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <div className="p-3 text-xs text-muted-foreground text-center">
-                {t("sftp.bookmark.empty")}
-              </div>
-            )}
+          </TooltipTrigger>
+          <TooltipContent>{t("sftp.goToTerminalCwd")}</TooltipContent>
+        </Tooltip>
+      )}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant={showFilterBar || pane.filter ? "secondary" : "ghost"}
+            size="icon"
+            className={cn("h-6 w-6", pane.filter && "text-primary")}
+            onClick={handleToggleFilter}
+          >
+            <Search size={14} />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{t("sftp.filter")}</TooltipContent>
+      </Tooltip>
+    </>
+  );
+
+  // Collapsible action buttons (shown inline when space allows)
+  const collapsibleButtons = (
+    <>
+      {isRemote && (
+        <Popover>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6"
+                >
+                  <Languages size={14} />
+                </Button>
+              </PopoverTrigger>
+            </TooltipTrigger>
+            <TooltipContent>{t("sftp.encoding.label")}</TooltipContent>
+          </Tooltip>
+          <PopoverContent className="w-36 p-1" align="end">
+            {(["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-xs rounded-sm hover:bg-secondary transition-colors",
+                    pane.filenameEncoding === encoding && "bg-secondary"
+                  )}
+                  onClick={() => onSetFilenameEncoding(encoding)}
+                >
+                  <Check
+                    size={12}
+                    className={cn(
+                      "shrink-0",
+                      pane.filenameEncoding === encoding ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  {t(`sftp.encoding.${encoding === "utf-8" ? "utf8" : encoding}`)}
+                </button>
+              </PopoverClose>
+            ))}
           </PopoverContent>
         </Popover>
+      )}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            onClick={handleNewFolder}
+          >
+            <FolderPlus size={14} />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{t("sftp.newFolder")}</TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            onClick={handleNewFile}
+          >
+            <FilePlus size={14} />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{t("sftp.newFile")}</TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant={showHiddenFiles ? "secondary" : "ghost"}
+            size="icon"
+            className={cn("h-6 w-6", showHiddenFiles && "text-primary")}
+            onClick={onToggleShowHiddenFiles}
+          >
+            {showHiddenFiles ? <EyeOff size={14} /> : <Eye size={14} />}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{t("settings.sftp.showHiddenFiles")}</TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            onClick={onRefresh}
+          >
+            <RefreshCw
+              size={14}
+              className={
+                pane.loading || pane.reconnecting ? "animate-spin" : ""
+              }
+            />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{t("common.refresh")}</TooltipContent>
+      </Tooltip>
+    </>
+  );
 
-      <div className="ml-auto flex items-center gap-0.5">
-        {!pane.connection?.isLocal && (
-          <Popover>
-            <PopoverTrigger asChild>
+  // Overflow dropdown menu items (same collapsible actions as menu items)
+  const overflowMenuItems = (
+    <div className="flex flex-col min-w-[140px]">
+      {isRemote && (
+        <Popover>
+          <PopoverTrigger asChild>
+            <button className="flex items-center gap-2 px-2 py-1.5 text-xs rounded-sm hover:bg-secondary transition-colors w-full text-left">
+              <Languages size={14} className="shrink-0" />
+              {t("sftp.encoding.label")}
+            </button>
+          </PopoverTrigger>
+          <PopoverContent className="w-36 p-1" align="start" side="right">
+            {(["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-xs rounded-sm hover:bg-secondary transition-colors",
+                    pane.filenameEncoding === encoding && "bg-secondary"
+                  )}
+                  onClick={() => onSetFilenameEncoding(encoding)}
+                >
+                  <Check
+                    size={12}
+                    className={cn(
+                      "shrink-0",
+                      pane.filenameEncoding === encoding ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  {t(`sftp.encoding.${encoding === "utf-8" ? "utf8" : encoding}`)}
+                </button>
+              </PopoverClose>
+            ))}
+          </PopoverContent>
+        </Popover>
+      )}
+      <button
+        className="flex items-center gap-2 px-2 py-1.5 text-xs rounded-sm hover:bg-secondary transition-colors w-full text-left"
+        onClick={handleNewFolder}
+      >
+        <FolderPlus size={14} className="shrink-0" />
+        {t("sftp.newFolder")}
+      </button>
+      <button
+        className="flex items-center gap-2 px-2 py-1.5 text-xs rounded-sm hover:bg-secondary transition-colors w-full text-left"
+        onClick={handleNewFile}
+      >
+        <FilePlus size={14} className="shrink-0" />
+        {t("sftp.newFile")}
+      </button>
+      <button
+        className={cn(
+          "flex items-center gap-2 px-2 py-1.5 text-xs rounded-sm hover:bg-secondary transition-colors w-full text-left",
+          showHiddenFiles && "text-primary",
+        )}
+        onClick={onToggleShowHiddenFiles}
+      >
+        {showHiddenFiles ? <EyeOff size={14} className="shrink-0" /> : <Eye size={14} className="shrink-0" />}
+        {t("settings.sftp.showHiddenFiles")}
+      </button>
+      <button
+        className="flex items-center gap-2 px-2 py-1.5 text-xs rounded-sm hover:bg-secondary transition-colors w-full text-left"
+        onClick={onRefresh}
+      >
+        <RefreshCw
+          size={14}
+          className={cn("shrink-0", (pane.loading || pane.reconnecting) && "animate-spin")}
+        />
+        {t("common.refresh")}
+      </button>
+    </div>
+  );
+
+  return (
+    <TooltipProvider delayDuration={500} skipDelayDuration={100} disableHoverableContent>
+      {/* Toolbar - always visible when connected */}
+      <div ref={outerRef} className="h-7 px-2 flex items-center gap-1 border-b border-border/40 bg-secondary/20">
+        {/* 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 min-w-0 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>
+        )}
+
+        {/* Bookmark button with dropdown */}
+        <Popover>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className={cn("h-5 w-5 shrink-0", isCurrentPathBookmarked && "text-yellow-500")}
+                    onClick={(e) => {
+                  // If not bookmarked, toggle directly instead of opening popover
+                  if (!isCurrentPathBookmarked && bookmarks.length === 0) {
+                    e.preventDefault();
+                    onToggleBookmark();
+                  }
+                }}
+              >
+                <Bookmark size={12} fill={isCurrentPathBookmarked ? "currentColor" : "none"} />
+              </Button>
+                </PopoverTrigger>
+              </TooltipTrigger>
+              <TooltipContent>{isCurrentPathBookmarked ? t("sftp.bookmark.remove") : t("sftp.bookmark.add")}</TooltipContent>
+            </Tooltip>
+            <PopoverContent className="w-64 p-0" align="start">
+              <div className="p-2 border-b border-border/40">
+                <Button
+                  variant={isCurrentPathBookmarked ? "secondary" : "ghost"}
+                  size="sm"
+                  className="w-full justify-start text-xs h-7"
+                  onClick={onToggleBookmark}
+                >
+                  <Bookmark size={12} fill={isCurrentPathBookmarked ? "currentColor" : "none"} className={cn("mr-2", isCurrentPathBookmarked && "text-yellow-500")} />
+                  {isCurrentPathBookmarked ? t("sftp.bookmark.remove") : t("sftp.bookmark.add")}
+                </Button>
+              </div>
+              {bookmarks.length > 0 ? (
+                <div className="max-h-48 overflow-auto py-1">
+                  {bookmarks.map((bm) => (
+                    <div
+                      key={bm.id}
+                      className="flex items-center gap-1 px-2 py-1 hover:bg-secondary/60 group"
+                    >
+                      <button
+                        type="button"
+                        className="flex-1 text-left text-xs truncate font-mono"
+                        onClick={() => onNavigateToBookmark(bm.path)}
+                        title={bm.path}
+                      >
+                        {bm.label}
+                        <span className="ml-1.5 text-muted-foreground text-[10px]">{bm.path}</span>
+                      </button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-5 w-5 opacity-0 group-hover:opacity-100 shrink-0 text-muted-foreground hover:text-destructive"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onDeleteBookmark(bm.id);
+                        }}
+                      >
+                        <Trash2 size={10} />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="p-3 text-xs text-muted-foreground text-center">
+                  {t("sftp.bookmark.empty")}
+                </div>
+              )}
+            </PopoverContent>
+          </Popover>
+
+        {/* Action buttons area - observed for overflow */}
+        <div className="ml-auto flex items-center gap-0.5 shrink-0">
+          {collapsed ? (
+            <>
+              {pinnedButtons}
+              <Dropdown>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <DropdownTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-6 w-6"
+                      >
+                    <MoreHorizontal size={14} />
+                  </Button>
+                    </DropdownTrigger>
+                  </TooltipTrigger>
+                  <TooltipContent>{t("common.more")}</TooltipContent>
+                </Tooltip>
+                <DropdownContent align="end">
+                  {overflowMenuItems}
+                </DropdownContent>
+              </Dropdown>
+            </>
+          ) : (
+            <>
+              {pinnedButtons}
+              {collapsibleButtons}
+            </>
+          )}
+        </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>
+          <Tooltip>
+            <TooltipTrigger asChild>
               <Button
                 variant="ghost"
                 size="icon"
-                className="h-6 w-6"
-                title={t("sftp.encoding.label")}
-              >
-                <Languages size={14} />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-36 p-1" align="end">
-              {(["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-xs rounded-sm hover:bg-secondary transition-colors",
-                      pane.filenameEncoding === encoding && "bg-secondary"
-                    )}
-                    onClick={() => onSetFilenameEncoding(encoding)}
-                  >
-                    <Check
-                      size={12}
-                      className={cn(
-                        "shrink-0",
-                        pane.filenameEncoding === encoding ? "opacity-100" : "opacity-0"
-                      )}
-                    />
-                    {t(`sftp.encoding.${encoding === "utf-8" ? "utf8" : encoding}`)}
-                  </button>
-                </PopoverClose>
-              ))}
-            </PopoverContent>
-          </Popover>
-        )}
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-6 w-6"
-          onClick={() => {
-            setNewFolderName("");
-            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) {
+                className="h-6 w-6 shrink-0"
+                onClick={() => {
                   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>
-          )}
+                }}
+              >
+                <X size={14} />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("common.close")}</TooltipContent>
+          </Tooltip>
         </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>
-    )}
-  </>
-);
+      )}
+    </TooltipProvider>
+  );
+};

components/sftp/SftpPaneView.tsx

@@ -12,7 +12,6 @@ import {
   useSftpDrag,
   useSftpHosts,
   useSftpPaneCallbacks,
-  useSftpShowHiddenFiles,
   useSftpUpdateHosts,
 } from "./index";
 import type { SftpPane } from "../../application/state/sftp/types";
@@ -58,6 +57,8 @@ interface SftpPaneViewProps {
   pane: SftpPane;
   showHeader?: boolean;
   showEmptyHeader?: boolean;
+  onToggleShowHiddenFiles?: () => void;
+  onGoToTerminalCwd?: () => void;
 }
 
 const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
@@ -65,13 +66,14 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
   pane,
   showHeader = true,
   showEmptyHeader = true,
+  onToggleShowHiddenFiles,
+  onGoToTerminalCwd,
 }) => {
   const isActive = true;
 
   const callbacks = useSftpPaneCallbacks(side);
   const { draggedFiles, onDragStart, onDragEnd } = useSftpDrag();
   const hosts = useSftpHosts();
-  const showHiddenFiles = useSftpShowHiddenFiles();
 
   const { t } = useI18n();
   const [, startTransition] = useTransition();
@@ -118,7 +120,7 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
     files: pane.files,
     filter: pane.filter,
     connection: pane.connection,
-    showHiddenFiles,
+    showHiddenFiles: pane.showHiddenFiles,
     sortField,
     sortOrder,
   });
@@ -299,7 +301,6 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
       <SftpPaneToolbar
         t={t}
         pane={pane}
-        onNavigateUp={callbacks.onNavigateUp}
         onNavigateTo={callbacks.onNavigateTo}
         onSetFilter={callbacks.onSetFilter}
         onSetFilenameEncoding={callbacks.onSetFilenameEncoding}
@@ -333,6 +334,9 @@ const SftpPaneViewInner: React.FC<SftpPaneViewProps> = ({
         onToggleBookmark={toggleBookmark}
         onNavigateToBookmark={callbacks.onNavigateTo}
         onDeleteBookmark={deleteBookmark}
+        showHiddenFiles={pane.showHiddenFiles}
+        onToggleShowHiddenFiles={onToggleShowHiddenFiles}
+        onGoToTerminalCwd={onGoToTerminalCwd}
       />
 
       <SftpPaneFileList

components/sftp/SftpTransferItem.tsx

@@ -12,6 +12,7 @@ import {
     XCircle,
 } from 'lucide-react';
 import React, { memo } from 'react';
+import { getParentPath } from '../../application/state/sftp/utils';
 import { cn } from '../../lib/utils';
 import { TransferTask } from '../../types';
 import { Button } from '../ui/button';
@@ -22,9 +23,18 @@ interface SftpTransferItemProps {
     onCancel: () => void;
     onRetry: () => void;
     onDismiss: () => void;
+    canRevealTarget?: boolean;
+    onRevealTarget?: () => void;
 }
 
-const SftpTransferItemInner: React.FC<SftpTransferItemProps> = ({ task, onCancel, onRetry, onDismiss }) => {
+const SftpTransferItemInner: React.FC<SftpTransferItemProps> = ({
+    task,
+    onCancel,
+    onRetry,
+    onDismiss,
+    canRevealTarget = false,
+    onRevealTarget,
+}) => {
     const progress = task.totalBytes > 0 ? Math.min((task.transferredBytes / task.totalBytes) * 100, 100) : 0;
 
     // Calculate remaining time from backend-reported sliding-window speed
@@ -49,33 +59,43 @@ const SftpTransferItemInner: React.FC<SftpTransferItemProps> = ({ task, onCancel
             : '';
 
     const speedFormatted = effectiveSpeed > 0 ? formatSpeed(effectiveSpeed) : '';
+    const targetDirectoryPath = task.isDirectory ? task.targetPath : getParentPath(task.targetPath);
 
-    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" />}
+    const details = (
+        <>
+            <div className="h-5 w-5 rounded flex items-center justify-center shrink-0">
+                {task.status === 'transferring' && <Loader2 size={12} className="animate-spin text-primary" />}
                 {task.status === 'pending' && (task.isDirectory
-                    ? <FolderUp size={14} className="text-muted-foreground animate-pulse" />
-                    : <ArrowDown size={14} className="text-muted-foreground animate-bounce" />
+                    ? <FolderUp size={12} className="text-muted-foreground animate-pulse" />
+                    : <ArrowDown size={12} 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" />}
+                {task.status === 'completed' && <CheckCircle2 size={12} className="text-green-500" />}
+                {task.status === 'failed' && <XCircle size={12} className="text-destructive" />}
+                {task.status === 'cancelled' && <XCircle size={12} className="text-muted-foreground" />}
             </div>
 
             <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2">
-                    <span className="text-sm truncate font-medium">{task.fileName}</span>
+                    <span className="text-[13px] leading-5 truncate font-medium">{task.fileName}</span>
                     {task.status === 'transferring' && speedFormatted && (
-                        <span className="text-xs text-primary/80 font-mono transition-opacity duration-300">{speedFormatted}</span>
+                        <span className="text-[10px] text-primary/80 font-mono transition-opacity duration-300">{speedFormatted}</span>
                     )}
                     {task.status === 'transferring' && remainingFormatted && (
-                        <span className="text-xs text-muted-foreground transition-opacity duration-300">{remainingFormatted}</span>
+                        <span className="text-[10px] text-muted-foreground transition-opacity duration-300">{remainingFormatted}</span>
                     )}
                 </div>
+                <div
+                    className={cn(
+                        "text-[9px] mt-0.5 truncate",
+                        canRevealTarget ? "text-primary/80" : "text-muted-foreground",
+                    )}
+                    title={targetDirectoryPath}
+                >
+                    {targetDirectoryPath}
+                </div>
                 {(task.status === 'transferring' || task.status === 'pending') && (
-                    <div className="flex items-center gap-2 mt-1.5">
-                        <div className="flex-1 h-2 bg-secondary/80 rounded-full overflow-hidden">
+                    <div className="flex items-center gap-2 mt-1">
+                        <div className="flex-1 h-1.5 bg-secondary/80 rounded-full overflow-hidden">
                             <div
                                 className={cn(
                                     "h-full rounded-full relative overflow-hidden",
@@ -100,39 +120,56 @@ const SftpTransferItemInner: React.FC<SftpTransferItemProps> = ({ task, onCancel
                                 )}
                             </div>
                         </div>
-                        <span className="text-[11px] text-muted-foreground shrink-0 min-w-[40px] text-right font-mono">
+                        <span className="text-[10px] text-muted-foreground shrink-0 min-w-[34px] text-right font-mono">
                             {task.status === 'pending' ? 'waiting...' : `${Math.round(progress)}%`}
                         </span>
                     </div>
                 )}
                 {task.status === 'transferring' && bytesDisplay && (
-                    <div className="text-[10px] text-muted-foreground mt-0.5 font-mono">
+                    <div className="text-[9px] text-muted-foreground mt-0.5 font-mono">
                         {bytesDisplay}
                     </div>
                 )}
                 {task.status === 'completed' && bytesDisplay && (
-                    <div className="text-[10px] text-green-600 mt-0.5">
+                    <div className="text-[9px] text-green-600 mt-0.5">
                         Completed - {bytesDisplay}
                     </div>
                 )}
                 {task.status === 'failed' && task.error && (
-                    <span className="text-xs text-destructive">{task.error}</span>
+                    <span className="text-[10px] text-destructive">{task.error}</span>
                 )}
             </div>
+        </>
+    );
+
+    return (
+        <div className="flex items-center gap-2.5 px-3 py-2 bg-background/60 border-t border-border/40 backdrop-blur-sm">
+            {canRevealTarget && onRevealTarget ? (
+                <button
+                    type="button"
+                    className="flex flex-1 min-w-0 items-center gap-2.5 rounded-sm text-left transition-colors hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50"
+                    onClick={onRevealTarget}
+                    title="Open transfer destination"
+                >
+                    {details}
+                </button>
+            ) : (
+                details
+            )}
 
             <div className="flex items-center gap-1 shrink-0">
                 {task.status === 'failed' && task.retryable !== false && (
-                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={onRetry} title="Retry">
+                    <Button variant="ghost" size="icon" className="h-6 w-6" onClick={onRetry} title="Retry">
                         <RefreshCw size={12} />
                     </Button>
                 )}
                 {(task.status === 'pending' || task.status === 'transferring') && (
-                    <Button variant="ghost" size="icon" className="h-7 w-7 text-destructive hover:text-destructive" onClick={onCancel} title="Cancel">
+                    <Button variant="ghost" size="icon" className="h-6 w-6 text-destructive hover:text-destructive" onClick={onCancel} title="Cancel">
                         <X size={12} />
                     </Button>
                 )}
                 {(task.status === 'completed' || task.status === 'failed' || task.status === 'cancelled') && (
-                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={onDismiss} title="Dismiss">
+                    <Button variant="ghost" size="icon" className="h-6 w-6" onClick={onDismiss} title="Dismiss">
                         <X size={12} />
                     </Button>
                 )}
@@ -158,6 +195,8 @@ const arePropsEqual = (
 
     // Always re-render on fileName change
     if (prev.fileName !== next.fileName) return false;
+    if (prev.targetPath !== next.targetPath) return false;
+    if ((prevProps.canRevealTarget ?? false) !== (nextProps.canRevealTarget ?? false)) return false;
 
     // For transferring status, allow frequent re-renders for smooth progress bar
     if (next.status === 'transferring') {

components/sftp/SftpTransferQueue.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { Button } from "../ui/button";
+import { useI18n } from "../../application/i18n/I18nProvider";
+import type { useSftpState } from "../../application/state/useSftpState";
+import type { TransferTask } from "../../types";
+import { SftpTransferItem } from "./SftpTransferItem";
+
+type SftpState = ReturnType<typeof useSftpState>;
+
+interface SftpTransferQueueProps {
+  sftp: SftpState;
+  visibleTransfers: SftpState["transfers"];
+  canRevealTransferTarget?: (task: TransferTask) => boolean;
+  onRevealTransferTarget?: (task: TransferTask) => void | Promise<void>;
+}
+
+export const SftpTransferQueue: React.FC<SftpTransferQueueProps> = ({
+  sftp,
+  visibleTransfers,
+  canRevealTransferTarget,
+  onRevealTransferTarget,
+}) => {
+  const { t } = useI18n();
+
+  if (sftp.transfers.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="border-t border-border/70 bg-secondary/80 backdrop-blur-sm shrink-0">
+      <div className="flex items-center justify-between px-3 py-1.5 text-[11px] text-muted-foreground border-b border-border/40">
+        <span className="font-medium">
+          {t("sftp.transfers")}
+          {sftp.activeTransfersCount > 0 && (
+            <span className="ml-2 text-primary">
+              ({t("sftp.transfers.active", { count: sftp.activeTransfersCount })})
+            </span>
+          )}
+        </span>
+        {sftp.transfers.some(
+          (tr) => tr.status === "completed" || tr.status === "cancelled",
+        ) && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-5 px-1.5 text-[11px]"
+            onClick={sftp.clearCompletedTransfers}
+          >
+            {t("sftp.transfers.clearCompleted")}
+          </Button>
+        )}
+      </div>
+      <div className="max-h-40 overflow-auto">
+        {visibleTransfers.map((task) => (
+          <SftpTransferItem
+            key={task.id}
+            task={task}
+            onCancel={() => {
+              if (task.sourceConnectionId === "external") {
+                sftp.cancelExternalUpload();
+              }
+              sftp.cancelTransfer(task.id);
+            }}
+            onRetry={() => sftp.retryTransfer(task.id)}
+            onDismiss={() => sftp.dismissTransfer(task.id)}
+            canRevealTarget={canRevealTransferTarget?.(task) ?? false}
+            onRevealTarget={
+              onRevealTransferTarget
+                ? () => {
+                    void onRevealTransferTarget(task);
+                  }
+                : undefined
+            }
+          />
+        ))}
+      </div>
+    </div>
+  );
+};

components/sftp/hooks/useSftpKeyboardShortcuts.ts

@@ -32,7 +32,6 @@ interface UseSftpKeyboardShortcutsParams {
   hotkeyScheme: "disabled" | "mac" | "pc";
   sftpRef: MutableRefObject<SftpStateApi>;
   isActive: boolean;
-  showHiddenFiles: boolean;
 }
 
 /**
@@ -58,7 +57,6 @@ export const useSftpKeyboardShortcuts = ({
   hotkeyScheme,
   sftpRef,
   isActive,
-  showHiddenFiles,
 }: UseSftpKeyboardShortcutsParams) => {
   const handleKeyDown = useCallback(
     async (e: KeyboardEvent) => {
@@ -238,7 +236,7 @@ export const useSftpKeyboardShortcuts = ({
         case "sftpSelectAll": {
           // Select all files in the current pane
           const term = pane.filter.trim().toLowerCase();
-          let visibleFiles = filterHiddenFiles(pane.files, showHiddenFiles, pane.connection.isLocal);
+          let visibleFiles = filterHiddenFiles(pane.files, pane.showHiddenFiles);
           if (term) {
             visibleFiles = visibleFiles.filter(
               (f) => f.name === ".." || f.name.toLowerCase().includes(term),
@@ -280,7 +278,7 @@ export const useSftpKeyboardShortcuts = ({
         }
       }
     },
-    [hotkeyScheme, isActive, keyBindings, sftpRef, showHiddenFiles]
+    [hotkeyScheme, isActive, keyBindings, sftpRef]
   );
 
   useEffect(() => {

components/sftp/hooks/useSftpPaneFiles.ts

@@ -29,12 +29,12 @@ export const useSftpPaneFiles = ({
 }: UseSftpPaneFilesParams): UseSftpPaneFilesResult => {
   const filteredFiles = useMemo(() => {
     const term = filter.trim().toLowerCase();
-    let nextFiles = filterHiddenFiles(files, showHiddenFiles, connection?.isLocal);
+    let nextFiles = filterHiddenFiles(files, showHiddenFiles);
     if (!term) return nextFiles;
     return nextFiles.filter(
       (f) => f.name === ".." || f.name.toLowerCase().includes(term),
     );
-  }, [files, filter, showHiddenFiles, connection?.isLocal]);
+  }, [files, filter, showHiddenFiles]);
 
   const displayFiles = useMemo(() => {
     if (!connection) return [];

components/sftp/hooks/useSftpPaneVirtualList.ts

@@ -30,14 +30,12 @@ export const useSftpPaneVirtualList = ({
     if (!container || !isActive) return;
     const update = () => setViewportHeight(container.clientHeight);
     update();
-    const raf1 = window.requestAnimationFrame(update);
-    const raf2 = window.requestAnimationFrame(update);
+    const raf = window.requestAnimationFrame(update);
     const resizeObserver = new ResizeObserver(update);
     resizeObserver.observe(container);
     return () => {
       resizeObserver.disconnect();
-      window.cancelAnimationFrame(raf1);
-      window.cancelAnimationFrame(raf2);
+      window.cancelAnimationFrame(raf);
     };
   }, [isActive, sortedDisplayFiles.length]);
 

components/sftp/hooks/useSftpViewFileOps.ts

@@ -119,6 +119,10 @@ export const useSftpViewFileOps = ({
     file: SftpFileEntry;
     side: "left" | "right";
     fullPath: string;
+    /** Host ID at the time the file was opened, to prevent saving to wrong host.
+     * Uses hostId (not connectionId) because auto-reconnect after a transient
+     * disconnect generates a fresh connectionId for the same endpoint. */
+    hostId?: string;
   } | null>(null);
   const [textEditorContent, setTextEditorContent] = useState("");
   const [loadingTextContent, setLoadingTextContent] = useState(false);
@@ -148,7 +152,7 @@ export const useSftpViewFileOps = ({
 
       try {
         setLoadingTextContent(true);
-        setTextEditorTarget({ file, side, fullPath });
+        setTextEditorTarget({ file, side, fullPath, hostId: pane.connection.hostId });
 
         const content = await sftpRef.current.readTextFile(side, fullPath);
 
@@ -242,6 +246,19 @@ export const useSftpViewFileOps = ({
     async (content: string) => {
       if (!textEditorTarget) return;
 
+      // Verify the SFTP connection hasn't switched to a different host.
+      // We check hostId (not connectionId) because auto-reconnect after a
+      // transient disconnect generates a fresh connectionId for the same
+      // endpoint.  The auto-connect effect in SftpSidePanel blocks
+      // host-switching while the editor is open, so a hostId mismatch here
+      // reliably indicates a genuinely different endpoint.
+      const currentPane = textEditorTarget.side === "left"
+        ? sftpRef.current.leftPane
+        : sftpRef.current.rightPane;
+      if (textEditorTarget.hostId && currentPane.connection?.hostId !== textEditorTarget.hostId) {
+        throw new Error("SFTP connection changed while editing — file not saved to prevent writing to wrong host");
+      }
+
       await sftpRef.current.writeTextFile(
         textEditorTarget.side,
         textEditorTarget.fullPath,

components/sftp/index.ts

@@ -19,7 +19,6 @@ export {
   useSftpDrag,
   useSftpHosts,
   useSftpUpdateHosts,
-  useSftpShowHiddenFiles,
   useActiveTabId,
   useIsPaneActive,
   activeTabStore,

components/sftp/utils.ts

@@ -192,39 +192,37 @@ export const isNavigableDirectory = (entry: SftpFileEntry): boolean => {
  * Check if a file is hidden
  * - Windows: checks the `hidden` attribute (set by localFsBridge)
  * - Unix/Linux (remote): also treats dotfiles (names starting with '.') as hidden
- * The ".." parent directory entry is never considered hidden.
+/**
+ * A file is considered hidden if:
+ * - It has the Windows hidden attribute (`hidden === true`), OR
+ * - Its name starts with a dot (Unix/Linux dotfile convention)
  *
- * @param isLocal  When true, only the Windows hidden attribute is checked.
- *                 This prevents `.gitignore` etc. from disappearing on local Windows panes.
+ * The ".." parent directory entry is never considered hidden.
  */
 export const isHiddenFile = <T extends { name: string; hidden?: boolean }>(
     file: T,
-    isLocal?: boolean
 ): boolean => {
     if (file.name === "..") return false;
-    // Windows hidden attribute — always checked
+    // Windows hidden attribute
     if (file.hidden === true) return true;
-    // Unix/Linux dotfile convention — only on remote/non-local connections
-    if (!isLocal && file.name.startsWith(".")) return true;
+    // Unix/Linux dotfile convention
+    if (file.name.startsWith(".")) return true;
     return false;
 };
 
 /** @deprecated Use isHiddenFile instead */
 export const isWindowsHiddenFile = <T extends { name: string; hidden?: boolean }>(file: T): boolean =>
-    isHiddenFile(file, true);
+    isHiddenFile(file);
 
 /**
  * Filter files based on hidden file visibility setting.
- * Filters Windows hidden files and, on remote connections, Unix/Linux dotfiles.
+ * Filters Windows hidden files and Unix/Linux dotfiles on all connections.
  * Always preserves ".." parent directory entry.
- *
- * @param isLocal  Pass true for local filesystem panes to skip dotfile filtering.
  */
 export const filterHiddenFiles = <T extends { name: string; hidden?: boolean }>(
     files: T[],
     showHiddenFiles: boolean,
-    isLocal?: boolean
 ): T[] => {
     if (showHiddenFiles) return files;
-    return files.filter((f) => !isHiddenFile(f, isLocal));
+    return files.filter((f) => !isHiddenFile(f));
 };

components/terminal/TerminalConnectionDialog.tsx

@@ -2,7 +2,7 @@
  * Terminal Connection Dialog
  * Full connection overlay with host info, progress indicator, and auth/progress content
  */
-import { User } from 'lucide-react';
+import { Loader2, TerminalSquare, User } from 'lucide-react';
 import React from 'react';
 import { useI18n } from '../../application/i18n/I18nProvider';
 import { cn } from '../../lib/utils';
@@ -31,7 +31,7 @@ export interface TerminalConnectionDialogProps {
     authProps: Omit<TerminalAuthDialogProps, 'keys'>;
     keys: SSHKey[];
     // Progress props
-    progressProps: Omit<TerminalConnectionProgressProps, 'status' | 'error' | 'showLogs' | '_setShowLogs'>;
+    progressProps: Omit<TerminalConnectionProgressProps, 'status' | 'error' | 'showLogs'>;
 }
 
 // Helper to get protocol display info
@@ -154,7 +154,11 @@ export const TerminalConnectionDialog: React.FC<TerminalConnectionDialogProps> =
                             "h-8 w-8 rounded-full flex items-center justify-center flex-shrink-0",
                             hasError ? "bg-destructive/20 text-destructive" : "bg-muted text-muted-foreground"
                         )}>
-                            {'>_'}
+                            {isConnecting ? (
+                                <Loader2 size={14} className="animate-spin" />
+                            ) : (
+                                <TerminalSquare size={14} />
+                            )}
                         </div>
                     </div>
                 </div>
@@ -166,7 +170,6 @@ export const TerminalConnectionDialog: React.FC<TerminalConnectionDialogProps> =
                         status={status}
                         error={error}
                         showLogs={showLogs}
-                        _setShowLogs={setShowLogs}
                         {...progressProps}
                     />
                 )}

components/terminal/TerminalConnectionProgress.tsx

@@ -14,7 +14,6 @@ export interface TerminalConnectionProgressProps {
     timeLeft: number;
     isCancelling: boolean;
     showLogs: boolean;
-    _setShowLogs: (show: boolean) => void; // Reserved for future log toggle UI within this component
     progressLogs: string[];
     onCancel: () => void;
     onRetry: () => void;
@@ -26,7 +25,6 @@ export const TerminalConnectionProgress: React.FC<TerminalConnectionProgressProp
     timeLeft,
     isCancelling,
     showLogs,
-    _setShowLogs, // Reserved for future log toggle UI within this component
     progressLogs,
     onCancel,
     onRetry,

components/terminal/TerminalContextMenu.tsx

@@ -28,6 +28,7 @@ export interface TerminalContextMenuProps {
   hotkeyScheme?: 'disabled' | 'mac' | 'pc';
   keyBindings?: KeyBinding[];
   rightClickBehavior?: RightClickBehavior;
+  isAlternateScreen?: boolean;
   onCopy?: () => void;
   onPaste?: () => void;
   onSelectAll?: () => void;
@@ -44,6 +45,7 @@ export const TerminalContextMenu: React.FC<TerminalContextMenuProps> = ({
   hotkeyScheme = 'mac',
   keyBindings,
   rightClickBehavior = 'context-menu',
+  isAlternateScreen = false,
   onCopy,
   onPaste,
   onSelectAll,
@@ -73,10 +75,14 @@ export const TerminalContextMenu: React.FC<TerminalContextMenuProps> = ({
   const splitVShortcut = getShortcut('split-vertical');
   const clearShortcut = getShortcut('clear-buffer');
 
-  const showContextMenu = rightClickBehavior === 'context-menu';
+  const showContextMenu = rightClickBehavior === 'context-menu' && !isAlternateScreen;
 
   const handleRightClick = useCallback(
     (e: React.MouseEvent) => {
+      // In alternate screen (tmux, vim, etc.), let the terminal application
+      // handle right-click natively to avoid conflicting menus
+      if (isAlternateScreen) return;
+
       if (rightClickBehavior === 'paste') {
         e.preventDefault();
         e.stopPropagation();
@@ -87,7 +93,7 @@ export const TerminalContextMenu: React.FC<TerminalContextMenuProps> = ({
         onSelectWord?.();
       }
     },
-    [rightClickBehavior, onPaste, onSelectWord],
+    [rightClickBehavior, onPaste, onSelectWord, isAlternateScreen],
   );
 
   // Always use ContextMenu wrapper to maintain consistent React tree structure

components/terminal/TerminalToolbar.tsx

@@ -5,28 +5,19 @@
 import { Check, FolderInput, Languages, X, Zap, Palette, Search, TextCursorInput } from 'lucide-react';
 import React, { useState } from 'react';
 import { useI18n } from '../../application/i18n/I18nProvider';
-import { Snippet, Host } from '../../types';
+import { Host } from '../../types';
 import { Button } from '../ui/button';
 import { Popover, PopoverClose, PopoverContent, PopoverTrigger } from '../ui/popover';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
 import { cn } from '../../lib/utils';
-import { ScrollArea } from '../ui/scroll-area';
-import ThemeCustomizeModal from './ThemeCustomizeModal';
 import HostKeywordHighlightPopover from './HostKeywordHighlightPopover';
 
 export interface TerminalToolbarProps {
     status: 'connecting' | 'connected' | 'disconnected';
-    snippets: Snippet[];
     host?: Host;
-    defaultThemeId: string;
-    defaultFontFamilyId: string;
-    defaultFontSize: number;
-    onUpdateTerminalThemeId?: (themeId: string) => void;
-    onUpdateTerminalFontFamilyId?: (fontFamilyId: string) => void;
-    onUpdateTerminalFontSize?: (fontSize: number) => void;
-    isScriptsOpen: boolean;
-    setIsScriptsOpen: (open: boolean) => void;
     onOpenSFTP: () => void;
-    onSnippetClick: (command: string) => void;
+    onOpenScripts: () => void;
+    onOpenTheme: () => void;
     onUpdateHost?: (host: Host) => void;
     showClose?: boolean;
     onClose?: () => void;
@@ -43,18 +34,10 @@ export interface TerminalToolbarProps {
 
 export const TerminalToolbar: React.FC<TerminalToolbarProps> = ({
     status,
-    snippets,
     host,
-    defaultThemeId,
-    defaultFontFamilyId,
-    defaultFontSize,
-    onUpdateTerminalThemeId,
-    onUpdateTerminalFontFamilyId,
-    onUpdateTerminalFontSize,
-    isScriptsOpen,
-    setIsScriptsOpen,
     onOpenSFTP,
-    onSnippetClick,
+    onOpenScripts,
+    onOpenTheme,
     onUpdateHost,
     showClose,
     onClose,
@@ -66,7 +49,6 @@ export const TerminalToolbar: React.FC<TerminalToolbarProps> = ({
     onSetTerminalEncoding,
 }) => {
     const { t } = useI18n();
-    const [themeModalOpen, setThemeModalOpen] = useState(false);
     const [highlightPopoverOpen, setHighlightPopoverOpen] = useState(false);
     const buttonBase = "h-6 w-6 p-0 shadow-none border-none text-[color:var(--terminal-toolbar-fg)] bg-transparent hover:bg-transparent";
 
@@ -75,69 +57,45 @@ export const TerminalToolbar: React.FC<TerminalToolbarProps> = ({
     const isSSHSession = !isLocalTerminal && !isSerialTerminal && host?.protocol !== 'telnet' && host?.protocol !== 'mosh' && !host?.moshEnabled && host?.hostname !== 'localhost';
     const hidesSftp = isLocalTerminal || isSerialTerminal;
 
-    const currentThemeId = host?.theme || defaultThemeId;
-    const currentFontFamilyId = host?.fontFamily || defaultFontFamilyId;
-    const currentFontSize = host?.fontSize || defaultFontSize;
-
-    const handleThemeChange = (themeId: string) => {
-        if (isLocalTerminal) {
-            onUpdateTerminalThemeId?.(themeId);
-            return;
-        }
-        if (host && onUpdateHost) {
-            onUpdateHost({ ...host, theme: themeId });
-        }
-    };
-
-    const handleFontFamilyChange = (fontFamilyId: string) => {
-        if (isLocalTerminal) {
-            onUpdateTerminalFontFamilyId?.(fontFamilyId);
-            return;
-        }
-        if (host && onUpdateHost) {
-            onUpdateHost({ ...host, fontFamily: fontFamilyId });
-        }
-    };
-
-    const handleFontSizeChange = (fontSize: number) => {
-        if (isLocalTerminal) {
-            onUpdateTerminalFontSize?.(fontSize);
-            return;
-        }
-        if (host && onUpdateHost) {
-            onUpdateHost({ ...host, fontSize });
-        }
-    };
-
     return (
-        <>
+        <TooltipProvider delayDuration={500} skipDelayDuration={100} disableHoverableContent>
             {!hidesSftp && (
-                <Button
-                    variant="secondary"
-                    size="icon"
-                    className={buttonBase}
-                    disabled={status !== 'connected'}
-                    title={status === 'connected' ? t("terminal.toolbar.openSftp") : t("terminal.toolbar.availableAfterConnect")}
-                    aria-label={t("terminal.toolbar.openSftp")}
-                    onClick={onOpenSFTP}
-                >
-                    <FolderInput size={12} />
-                </Button>
-            )}
-
-            {isSSHSession && onSetTerminalEncoding && (
-                <Popover>
-                    <PopoverTrigger asChild>
+                <Tooltip>
+                    <TooltipTrigger asChild>
                         <Button
                             variant="secondary"
                             size="icon"
                             className={buttonBase}
-                            title={t("terminal.toolbar.encoding")}
-                            aria-label={t("terminal.toolbar.encoding")}
+                            disabled={status !== 'connected'}
+                            aria-label={t("terminal.toolbar.openSftp")}
+                            onClick={onOpenSFTP}
                         >
-                            <Languages size={12} />
+                            <FolderInput size={12} />
                         </Button>
-                    </PopoverTrigger>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                        {status === 'connected' ? t("terminal.toolbar.openSftp") : t("terminal.toolbar.availableAfterConnect")}
+                    </TooltipContent>
+                </Tooltip>
+            )}
+
+            {isSSHSession && onSetTerminalEncoding && (
+                <Popover>
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <PopoverTrigger asChild>
+                                <Button
+                                    variant="secondary"
+                                    size="icon"
+                                    className={buttonBase}
+                                    aria-label={t("terminal.toolbar.encoding")}
+                                >
+                                    <Languages size={12} />
+                                </Button>
+                            </PopoverTrigger>
+                        </TooltipTrigger>
+                        <TooltipContent>{t("terminal.toolbar.encoding")}</TooltipContent>
+                    </Tooltip>
                     <PopoverContent className="w-36 p-1" align="start">
                         {(["utf-8", "gb18030"] as const).map((enc) => (
                             <PopoverClose asChild key={enc}>
@@ -163,57 +121,35 @@ export const TerminalToolbar: React.FC<TerminalToolbarProps> = ({
                 </Popover>
             )}
 
-            <Popover open={isScriptsOpen} onOpenChange={setIsScriptsOpen}>
-                <PopoverTrigger asChild>
+            <Tooltip>
+                <TooltipTrigger asChild>
                     <Button
                         variant="secondary"
                         size="icon"
                         className={buttonBase}
-                        title={t("terminal.toolbar.scripts")}
                         aria-label={t("terminal.toolbar.scripts")}
+                        onClick={onOpenScripts}
                     >
                         <Zap size={12} />
                     </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-64 p-0" align="start">
-                    <div className="px-3 py-2 text-[10px] uppercase text-muted-foreground font-semibold bg-muted/30 border-b">
-                        {t("terminal.toolbar.library")}
-                    </div>
-                    <ScrollArea className="h-64">
-                        <div className="py-1">
-                            {snippets.length === 0 ? (
-                                <div className="px-3 py-2 text-xs text-muted-foreground italic">
-                                    {t("terminal.toolbar.noSnippets")}
-                                </div>
-                            ) : (
-                                snippets.map((s) => (
-                                    <button
-                                        key={s.id}
-                                        onClick={() => onSnippetClick(s.command)}
-                                        className="w-full text-left px-3 py-2 text-xs hover:bg-accent transition-colors flex flex-col gap-0.5"
-                                    >
-                                        <span className="font-medium">{s.label}</span>
-                                        <span className="text-muted-foreground truncate font-mono text-[10px]">
-                                            {s.command}
-                                        </span>
-                                    </button>
-                                ))
-                            )}
-                        </div>
-                    </ScrollArea>
-                </PopoverContent>
-            </Popover>
+                </TooltipTrigger>
+                <TooltipContent>{t("terminal.toolbar.scripts")}</TooltipContent>
+            </Tooltip>
 
-            <Button
-                variant="secondary"
-                size="icon"
-                className={buttonBase}
-                title={t("terminal.toolbar.terminalSettings")}
-                aria-label={t("terminal.toolbar.terminalSettings")}
-                onClick={() => setThemeModalOpen(true)}
-            >
-                <Palette size={12} />
-            </Button>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button
+                        variant="secondary"
+                        size="icon"
+                        className={buttonBase}
+                        aria-label={t("terminal.toolbar.terminalSettings")}
+                        onClick={onOpenTheme}
+                    >
+                        <Palette size={12} />
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>{t("terminal.toolbar.terminalSettings")}</TooltipContent>
+            </Tooltip>
 
             <HostKeywordHighlightPopover
                 host={host}
@@ -223,59 +159,57 @@ export const TerminalToolbar: React.FC<TerminalToolbarProps> = ({
                 buttonClassName={buttonBase}
             />
 
-            <Button
-                variant="secondary"
-                size="icon"
-                className={buttonBase}
-                title={t("terminal.toolbar.composeBar")}
-                aria-label={t("terminal.toolbar.composeBar")}
-                aria-pressed={isComposeBarOpen}
-                onClick={onToggleComposeBar}
-            >
-                <TextCursorInput size={12} />
-            </Button>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button
+                        variant="secondary"
+                        size="icon"
+                        className={buttonBase}
+                        aria-label={t("terminal.toolbar.composeBar")}
+                        aria-pressed={isComposeBarOpen}
+                        onClick={onToggleComposeBar}
+                    >
+                        <TextCursorInput size={12} />
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>{t("terminal.toolbar.composeBar")}</TooltipContent>
+            </Tooltip>
 
-            <Button
-                variant="secondary"
-                size="icon"
-                className={buttonBase}
-                title={t("terminal.toolbar.searchTerminal")}
-                aria-label={t("terminal.toolbar.searchTerminal")}
-                aria-pressed={isSearchOpen}
-                onClick={onToggleSearch}
-            >
-                <Search size={12} />
-            </Button>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button
+                        variant="secondary"
+                        size="icon"
+                        className={buttonBase}
+                        aria-label={t("terminal.toolbar.searchTerminal")}
+                        aria-pressed={isSearchOpen}
+                        onClick={onToggleSearch}
+                    >
+                        <Search size={12} />
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>{t("terminal.toolbar.searchTerminal")}</TooltipContent>
+            </Tooltip>
 
             {showClose && onClose && (
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-6 w-6 text-[color:var(--terminal-toolbar-fg)] hover:bg-transparent"
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        onClose();
-                    }}
-                    title={t("terminal.toolbar.closeSession")}
-                >
-                    <X size={11} />
-                </Button>
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-6 w-6 text-[color:var(--terminal-toolbar-fg)] hover:bg-transparent"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                onClose();
+                            }}
+                        >
+                            <X size={11} />
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>{t("terminal.toolbar.closeSession")}</TooltipContent>
+                </Tooltip>
             )}
-
-            <ThemeCustomizeModal
-                open={themeModalOpen}
-                onClose={() => setThemeModalOpen(false)}
-                currentThemeId={currentThemeId}
-                currentFontFamilyId={currentFontFamilyId}
-                currentFontSize={currentFontSize}
-                onThemeChange={handleThemeChange}
-                onFontFamilyChange={handleFontFamilyChange}
-                onFontSizeChange={handleFontSizeChange}
-                onSave={() => {
-                    // Trigger any necessary updates
-                }}
-            />
-        </>
+        </TooltipProvider>
     );
 };
 

components/terminal/ThemeSidePanel.tsx

@@ -0,0 +1,430 @@
+/**
+ * ThemeSidePanel - Theme/Font customization panel for the terminal side panel
+ *
+ * Adapted from ThemeCustomizeModal's left panel content.
+ * No preview - the actual terminal behind serves as a live preview.
+ * Changes apply in real-time.
+ */
+
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { Check, Download, Minus, Palette, Pencil, Plus, Sparkles, Type } from 'lucide-react';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import { useAvailableFonts } from '../../application/state/fontStore';
+import { TERMINAL_THEMES, TerminalThemeConfig } from '../../infrastructure/config/terminalThemes';
+import { MIN_FONT_SIZE, MAX_FONT_SIZE, TerminalFont } from '../../infrastructure/config/fonts';
+import { useCustomThemes, useCustomThemeActions } from '../../application/state/customThemeStore';
+import { parseItermcolors } from '../../infrastructure/parsers/itermcolorsParser';
+import { CustomThemeModal } from './CustomThemeModal';
+import { cn } from '../../lib/utils';
+import { TerminalTheme } from '../../domain/models';
+import { ScrollArea } from '../ui/scroll-area';
+
+type TabType = 'theme' | 'font' | 'custom';
+
+// Memoized theme item component
+const ThemeItem = memo(({
+  theme,
+  isSelected,
+  onSelect,
+  onEdit,
+}: {
+  theme: TerminalThemeConfig;
+  isSelected: boolean;
+  onSelect: (id: string) => void;
+  onEdit?: (id: string) => void;
+}) => (
+  <div
+    role="button"
+    tabIndex={0}
+    onClick={() => onSelect(theme.id)}
+    onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelect(theme.id); } }}
+    className={cn(
+      'w-full flex items-center gap-2.5 px-3 py-2 text-left transition-colors group cursor-pointer',
+      isSelected
+        ? 'bg-accent/50'
+        : 'hover:bg-accent/50'
+    )}
+  >
+    {/* Color swatch */}
+    <div
+      className="w-6 h-6 rounded-md flex-shrink-0 flex flex-col justify-center items-start pl-0.5 gap-0.5 border border-border/50"
+      style={{ backgroundColor: theme.colors.background }}
+    >
+      <div className="h-0.5 w-2.5 rounded-full" style={{ backgroundColor: theme.colors.green }} />
+      <div className="h-0.5 w-4 rounded-full" style={{ backgroundColor: theme.colors.blue }} />
+      <div className="h-0.5 w-1.5 rounded-full" style={{ backgroundColor: theme.colors.yellow }} />
+    </div>
+    <div className="flex-1 min-w-0">
+      <div className="text-xs font-medium truncate">
+        {theme.name}
+      </div>
+      <div className="text-[10px] text-muted-foreground capitalize">
+        {theme.type}
+        {theme.isCustom && ' • custom'}
+      </div>
+    </div>
+    {onEdit && (
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={(e) => { e.stopPropagation(); onEdit(theme.id); }}
+        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.stopPropagation(); e.preventDefault(); onEdit(theme.id); } }}
+        className="w-5 h-5 rounded flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-0 group-hover:opacity-100 transition-all"
+      >
+        <Pencil size={10} />
+      </div>
+    )}
+    {isSelected && !onEdit && (
+      <Check size={12} className="text-primary flex-shrink-0" />
+    )}
+  </div>
+));
+ThemeItem.displayName = 'ThemeItem';
+
+// Memoized font item component
+const FontItem = memo(({
+  font,
+  isSelected,
+  onSelect
+}: {
+  font: TerminalFont;
+  isSelected: boolean;
+  onSelect: (id: string) => void;
+}) => (
+  <button
+    onClick={() => onSelect(font.id)}
+    className={cn(
+      'w-full flex items-center gap-2.5 px-3 py-2 text-left transition-colors',
+      isSelected
+        ? 'bg-accent/50'
+        : 'hover:bg-accent/50'
+    )}
+  >
+    <div className="flex-1 min-w-0">
+      <div
+        className="text-xs font-medium truncate"
+        style={{ fontFamily: font.family }}
+      >
+        {font.name}
+      </div>
+      <div className="text-[10px] text-muted-foreground truncate">{font.description}</div>
+    </div>
+    {isSelected && (
+      <Check size={12} className="text-primary flex-shrink-0" />
+    )}
+  </button>
+));
+FontItem.displayName = 'FontItem';
+
+interface ThemeSidePanelProps {
+  currentThemeId: string;
+  currentFontFamilyId: string;
+  currentFontSize: number;
+  onThemeChange: (themeId: string) => void;
+  onFontFamilyChange: (fontFamilyId: string) => void;
+  onFontSizeChange: (fontSize: number) => void;
+  isVisible?: boolean;
+}
+
+const ThemeSidePanelInner: React.FC<ThemeSidePanelProps> = ({
+  currentThemeId,
+  currentFontFamilyId,
+  currentFontSize,
+  onThemeChange,
+  onFontFamilyChange,
+  onFontSizeChange,
+  isVisible = true,
+}) => {
+  const { t } = useI18n();
+  const availableFonts = useAvailableFonts();
+  const customThemes = useCustomThemes();
+  const { addTheme, updateTheme, deleteTheme } = useCustomThemeActions();
+
+  const [activeTab, setActiveTab] = useState<TabType>('theme');
+  const [editingTheme, setEditingTheme] = useState<TerminalTheme | null>(null);
+  const [isNewTheme, setIsNewTheme] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const allThemes = useMemo(
+    () => [...TERMINAL_THEMES, ...customThemes],
+    [customThemes]
+  );
+
+  const handleThemeSelect = useCallback((themeId: string) => {
+    setEditingTheme(null);
+    onThemeChange(themeId);
+  }, [onThemeChange]);
+
+  const handleFontSelect = useCallback((fontId: string) => {
+    onFontFamilyChange(fontId);
+  }, [onFontFamilyChange]);
+
+  const handleFontSizeChange = useCallback((delta: number) => {
+    const newSize = Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, currentFontSize + delta));
+    onFontSizeChange(newSize);
+  }, [currentFontSize, onFontSizeChange]);
+
+  const handleNewTheme = useCallback(() => {
+    const base = allThemes.find(t => t.id === currentThemeId) || TERMINAL_THEMES[0];
+    const newTheme: TerminalTheme = {
+      ...base,
+      id: `custom-${Date.now()}`,
+      name: `${base.name} (Custom)`,
+      isCustom: true,
+      colors: { ...base.colors },
+    };
+    setEditingTheme(newTheme);
+    setIsNewTheme(true);
+  }, [currentThemeId, allThemes]);
+
+  const handleImportFile = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+
+  const handleFileSelected = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const name = file.name.replace(/\.(itermcolors|xml)$/i, '');
+    const reader = new FileReader();
+    reader.onload = () => {
+      const xml = reader.result as string;
+      const parsed = parseItermcolors(xml, name);
+      if (parsed) {
+        addTheme(parsed);
+        onThemeChange(parsed.id);
+        setActiveTab('theme');
+      } else {
+        window.alert(t('terminal.customTheme.importError') || 'Failed to parse the selected file.');
+      }
+    };
+    reader.readAsText(file);
+    e.target.value = '';
+  }, [addTheme, onThemeChange, t]);
+
+  const handleEditTheme = useCallback((themeId: string) => {
+    const theme = customThemes.find(t => t.id === themeId);
+    if (theme) {
+      setEditingTheme({ ...theme, colors: { ...theme.colors } });
+      setIsNewTheme(false);
+    }
+  }, [customThemes]);
+
+  const handleEditorDelete = useCallback((themeId: string) => {
+    deleteTheme(themeId);
+    if (currentThemeId === themeId) {
+      onThemeChange(TERMINAL_THEMES[0].id);
+    }
+    setEditingTheme(null);
+    setIsNewTheme(false);
+  }, [deleteTheme, currentThemeId, onThemeChange]);
+
+  if (!isVisible) return null;
+
+  const builtinThemes = TERMINAL_THEMES;
+
+  return (
+    <>
+      <div className="h-full flex flex-col bg-background overflow-hidden">
+        {/* Tab Bar */}
+        <div className="flex p-1.5 gap-0.5 shrink-0 border-b border-border/50">
+          <button
+            onClick={() => { setActiveTab('theme'); setEditingTheme(null); }}
+            className={cn(
+              'flex-1 flex items-center justify-center gap-1 px-1.5 py-1.5 rounded-md text-[11px] font-medium transition-all',
+              activeTab === 'theme'
+                ? 'bg-primary/15 text-primary'
+                : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+            )}
+          >
+            <Palette size={12} />
+            {t('terminal.themeModal.tab.theme')}
+          </button>
+          <button
+            onClick={() => setActiveTab('font')}
+            className={cn(
+              'flex-1 flex items-center justify-center gap-1 px-1.5 py-1.5 rounded-md text-[11px] font-medium transition-all',
+              activeTab === 'font'
+                ? 'bg-primary/15 text-primary'
+                : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+            )}
+          >
+            <Type size={12} />
+            {t('terminal.themeModal.tab.font')}
+          </button>
+          <button
+            onClick={() => setActiveTab('custom')}
+            className={cn(
+              'flex-1 flex items-center justify-center gap-1 px-1.5 py-1.5 rounded-md text-[11px] font-medium transition-all',
+              activeTab === 'custom'
+                ? 'bg-primary/15 text-primary'
+                : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+            )}
+          >
+            <Sparkles size={12} />
+            {t('terminal.themeModal.tab.custom')}
+          </button>
+        </div>
+
+        {/* List Content */}
+        <ScrollArea className="flex-1 min-h-0">
+          <div className="py-1">
+            {activeTab === 'theme' && (
+              <div>
+                {builtinThemes.map(theme => (
+                  <ThemeItem
+                    key={theme.id}
+                    theme={theme}
+                    isSelected={currentThemeId === theme.id && !editingTheme}
+                    onSelect={handleThemeSelect}
+                  />
+                ))}
+                {customThemes.length > 0 && (
+                  <>
+                    <div className="text-[9px] uppercase tracking-wider text-muted-foreground mt-2 mb-1 px-1 font-semibold">
+                      {t('terminal.customTheme.section')}
+                    </div>
+                    {customThemes.map(theme => (
+                      <ThemeItem
+                        key={theme.id}
+                        theme={theme}
+                        isSelected={currentThemeId === theme.id && !editingTheme}
+                        onSelect={handleThemeSelect}
+                        onEdit={handleEditTheme}
+                      />
+                    ))}
+                  </>
+                )}
+              </div>
+            )}
+            {activeTab === 'font' && (
+              <div>
+                {availableFonts.map(font => (
+                  <FontItem
+                    key={font.id}
+                    font={font}
+                    isSelected={currentFontFamilyId === font.id}
+                    onSelect={handleFontSelect}
+                  />
+                ))}
+              </div>
+            )}
+            {activeTab === 'custom' && !editingTheme && (
+              <div>
+                <button
+                  onClick={handleNewTheme}
+                  className="w-full flex items-center gap-2.5 px-3 py-2 text-left hover:bg-accent/50 transition-colors"
+                >
+                  <div className="w-6 h-6 rounded-md flex items-center justify-center bg-primary/10 text-primary shrink-0">
+                    <Plus size={12} />
+                  </div>
+                  <div>
+                    <div className="text-xs font-medium text-foreground">{t('terminal.customTheme.new')}</div>
+                    <div className="text-[10px] text-muted-foreground">{t('terminal.customTheme.newDesc')}</div>
+                  </div>
+                </button>
+                <button
+                  onClick={handleImportFile}
+                  className="w-full flex items-center gap-2.5 px-3 py-2 text-left hover:bg-accent/50 transition-colors"
+                >
+                  <div className="w-6 h-6 rounded-md flex items-center justify-center bg-blue-500/10 text-blue-500 shrink-0">
+                    <Download size={12} />
+                  </div>
+                  <div>
+                    <div className="text-xs font-medium text-foreground">{t('terminal.customTheme.import')}</div>
+                    <div className="text-[10px] text-muted-foreground">{t('terminal.customTheme.importDesc')}</div>
+                  </div>
+                </button>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept=".itermcolors"
+                  onChange={handleFileSelected}
+                  className="hidden"
+                />
+                {customThemes.length > 0 && (
+                  <>
+                    <div className="text-[9px] uppercase tracking-wider text-muted-foreground mt-2 mb-1 px-1 font-semibold">
+                      {t('terminal.customTheme.yourThemes')}
+                    </div>
+                    {customThemes.map(theme => (
+                      <ThemeItem
+                        key={theme.id}
+                        theme={theme}
+                        isSelected={currentThemeId === theme.id}
+                        onSelect={handleThemeSelect}
+                        onEdit={handleEditTheme}
+                      />
+                    ))}
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+
+        {/* Font Size Control (only in font tab) */}
+        {activeTab === 'font' && (
+          <div className="p-2.5 border-t border-border/50 shrink-0">
+            <div className="text-[9px] uppercase tracking-wider text-muted-foreground mb-1.5 font-semibold">
+              {t('terminal.themeModal.fontSize')}
+            </div>
+            <div className="flex items-center justify-between gap-2 bg-muted/30 rounded-lg p-1.5">
+              <button
+                onClick={() => handleFontSizeChange(-1)}
+                disabled={currentFontSize <= MIN_FONT_SIZE}
+                className="w-7 h-7 rounded-md flex items-center justify-center bg-background hover:bg-accent text-foreground disabled:opacity-30 disabled:cursor-not-allowed transition-colors border border-border"
+              >
+                <Minus size={12} />
+              </button>
+              <div className="flex items-baseline gap-1">
+                <span className="text-lg font-bold text-foreground tabular-nums">{currentFontSize}</span>
+                <span className="text-[9px] text-muted-foreground">px</span>
+              </div>
+              <button
+                onClick={() => handleFontSizeChange(1)}
+                disabled={currentFontSize >= MAX_FONT_SIZE}
+                className="w-7 h-7 rounded-md flex items-center justify-center bg-background hover:bg-accent text-foreground disabled:opacity-30 disabled:cursor-not-allowed transition-colors border border-border"
+              >
+                <Plus size={12} />
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Current selection info */}
+        <div className="px-2.5 py-1.5 border-t border-border/50 shrink-0">
+          <div className="text-[9px] text-muted-foreground truncate">
+            {allThemes.find(t => t.id === currentThemeId)?.name ?? currentThemeId} • {availableFonts.find(f => f.id === currentFontFamilyId)?.name ?? currentFontFamilyId} • {currentFontSize}px
+          </div>
+        </div>
+      </div>
+
+      {/* Custom Theme Editor Modal */}
+      {editingTheme && (
+        <CustomThemeModal
+          open={!!editingTheme}
+          theme={editingTheme}
+          isNew={isNewTheme}
+          onSave={(theme) => {
+            if (isNewTheme) {
+              addTheme(theme);
+              onThemeChange(theme.id);
+            } else {
+              updateTheme(theme.id, theme);
+              if (currentThemeId === theme.id) {
+                onThemeChange(theme.id);
+              }
+            }
+            setEditingTheme(null);
+            setIsNewTheme(false);
+          }}
+          onDelete={isNewTheme ? undefined : handleEditorDelete}
+          onCancel={() => { setEditingTheme(null); setIsNewTheme(false); }}
+        />
+      )}
+    </>
+  );
+};
+
+export const ThemeSidePanel = memo(ThemeSidePanelInner);
+ThemeSidePanel.displayName = 'ThemeSidePanel';

components/terminal/hooks/useTerminalContextActions.ts

@@ -14,12 +14,14 @@ export const useTerminalContextActions = ({
   terminalBackend,
   onHasSelectionChange,
   disableBracketedPasteRef,
+  scrollOnPasteRef,
 }: {
   termRef: RefObject<XTerm | null>;
   sessionRef: RefObject<string | null>;
   terminalBackend: TerminalBackendWriteApi;
   onHasSelectionChange?: (hasSelection: boolean) => void;
   disableBracketedPasteRef?: RefObject<boolean>;
+  scrollOnPasteRef?: RefObject<boolean>;
 }) => {
   const onCopy = useCallback(() => {
     const term = termRef.current;
@@ -39,11 +41,19 @@ export const useTerminalContextActions = ({
         let data = normalizeLineEndings(text);
         if (term.modes.bracketedPasteMode && !disableBracketedPasteRef?.current) data = wrapBracketedPaste(data);
         terminalBackend.writeToSession(sessionRef.current, data);
+        if (scrollOnPasteRef?.current) {
+          term.scrollToBottom();
+          if (typeof requestAnimationFrame === "function") {
+            requestAnimationFrame(() => {
+              term.scrollToBottom();
+            });
+          }
+        }
       }
     } catch (err) {
       logger.warn("Failed to paste from clipboard", err);
     }
-  }, [sessionRef, termRef, terminalBackend, disableBracketedPasteRef]);
+  }, [sessionRef, termRef, terminalBackend, disableBracketedPasteRef, scrollOnPasteRef]);
 
   const onSelectAll = useCallback(() => {
     const term = termRef.current;

components/terminal/index.ts

@@ -1,31 +0,0 @@
-/**
- * Terminal components module
- * Re-exports all terminal sub-components
- */
-
-export { TerminalAuthDialog } from './TerminalAuthDialog';
-export type { TerminalAuthDialogProps } from './TerminalAuthDialog';
-
-export { TerminalConnectionProgress } from './TerminalConnectionProgress';
-export type { TerminalConnectionProgressProps } from './TerminalConnectionProgress';
-
-export { TerminalToolbar } from './TerminalToolbar';
-export type { TerminalToolbarProps } from './TerminalToolbar';
-
-export { HostKeywordHighlightPopover } from './HostKeywordHighlightPopover';
-export type { HostKeywordHighlightPopoverProps } from './HostKeywordHighlightPopover';
-
-export { TerminalConnectionDialog } from './TerminalConnectionDialog';
-export type { ChainProgress,TerminalConnectionDialogProps } from './TerminalConnectionDialog';
-
-export { TerminalContextMenu } from './TerminalContextMenu';
-export type { TerminalContextMenuProps } from './TerminalContextMenu';
-
-export { TerminalSearchBar } from './TerminalSearchBar';
-export type { TerminalSearchBarProps } from './TerminalSearchBar';
-
-export { KeywordHighlighter } from './keywordHighlight';
-
-export { useTerminalSearch } from './hooks/useTerminalSearch';
-export { useTerminalContextActions } from './hooks/useTerminalContextActions';
-export { useTerminalAuthState } from './hooks/useTerminalAuthState';

components/terminal/runtime/createTerminalSessionStarters.ts

@@ -2,6 +2,7 @@ import type { FitAddon } from "@xterm/addon-fit";
 import type { SerializeAddon } from "@xterm/addon-serialize";
 import type { Terminal as XTerm } from "@xterm/xterm";
 import type { Dispatch, RefObject, SetStateAction } from "react";
+import { shouldScrollOnTerminalOutput } from "../../../domain/terminalScroll";
 import { logger } from "../../../lib/logger";
 import type { Host, Identity, SerialConfig, SSHKey, TerminalSession, TerminalSettings } from "../../../types";
 import {
@@ -68,8 +69,11 @@ export type TerminalSessionStartersContext = {
   sessionId: string;
   startupCommand?: string;
   terminalSettings?: TerminalSettings;
+  terminalSettingsRef?: RefObject<TerminalSettings | undefined>;
   terminalBackend: TerminalBackendApi;
   serialConfig?: SerialConfig;
+  isVisibleRef?: RefObject<boolean>;
+  pendingOutputScrollRef?: RefObject<boolean>;
 
   sessionRef: RefObject<string | null>;
   hasConnectedRef: RefObject<boolean>;
@@ -117,6 +121,41 @@ const buildTermEnv = (host: Host, terminalSettings?: TerminalSettings) => {
   return env;
 };
 
+const handleTerminalOutputAutoScroll = (
+  ctx: TerminalSessionStartersContext,
+  term: XTerm,
+) => {
+  const settings = ctx.terminalSettingsRef?.current ?? ctx.terminalSettings;
+  if (!shouldScrollOnTerminalOutput(settings)) {
+    return;
+  }
+
+  if (ctx.isVisibleRef?.current === false) {
+    if (ctx.pendingOutputScrollRef) {
+      ctx.pendingOutputScrollRef.current = true;
+    }
+    return;
+  }
+
+  term.scrollToBottom();
+};
+
+const writeSessionData = (
+  ctx: TerminalSessionStartersContext,
+  term: XTerm,
+  data: string,
+) => {
+  const settings = ctx.terminalSettingsRef?.current ?? ctx.terminalSettings;
+  if (!shouldScrollOnTerminalOutput(settings)) {
+    term.write(data);
+    return;
+  }
+
+  term.write(data, () => {
+    handleTerminalOutputAutoScroll(ctx, term);
+  });
+};
+
 const attachSessionToTerminal = (
   ctx: TerminalSessionStartersContext,
   term: XTerm,
@@ -139,7 +178,7 @@ const attachSessionToTerminal = (
       // Replace \n that is not preceded by \r with \r\n
       data = data.replace(/(?<!\r)\n/g, "\r\n");
     }
-    term.write(data);
+    writeSessionData(ctx, term, data);
     if (!ctx.hasConnectedRef.current) {
       ctx.updateStatus("connected");
       opts?.onConnected?.();
@@ -491,8 +530,11 @@ export const createTerminalSessionStarters = (ctx: TerminalSessionStartersContex
       const commandToRun = ctx.startupCommand || ctx.host.startupCommand;
       if (commandToRun && !ctx.hasRunStartupCommandRef.current) {
         ctx.hasRunStartupCommandRef.current = true;
+        const scheduledSessionId = id;
         setTimeout(() => {
-          if (!ctx.sessionRef.current) return;
+          // Guard against stale timers: if the session changed (e.g. user
+          // clicked Start Over quickly), skip to avoid double execution
+          if (!ctx.sessionRef.current || ctx.sessionRef.current !== scheduledSessionId) return;
           ctx.terminalBackend.writeToSession(ctx.sessionRef.current, `${commandToRun}\r`);
           if (ctx.onCommandExecuted) {
             ctx.onCommandExecuted(commandToRun, ctx.host.id, ctx.host.label, ctx.sessionId);
@@ -611,8 +653,9 @@ export const createTerminalSessionStarters = (ctx: TerminalSessionStartersContex
       const commandToRun = ctx.startupCommand || ctx.host.startupCommand;
       if (commandToRun && !ctx.hasRunStartupCommandRef.current) {
         ctx.hasRunStartupCommandRef.current = true;
+        const scheduledSessionId = id;
         setTimeout(() => {
-          if (!ctx.sessionRef.current) return;
+          if (!ctx.sessionRef.current || ctx.sessionRef.current !== scheduledSessionId) return;
           ctx.terminalBackend.writeToSession(ctx.sessionRef.current, `${commandToRun}\r`);
           if (ctx.onCommandExecuted) {
             ctx.onCommandExecuted(commandToRun, ctx.host.id, ctx.host.label, ctx.sessionId);
@@ -661,7 +704,7 @@ export const createTerminalSessionStarters = (ctx: TerminalSessionStartersContex
 
       ctx.sessionRef.current = id;
       ctx.disposeDataRef.current = ctx.terminalBackend.onSessionData(id, (chunk) => {
-        term.write(chunk);
+        writeSessionData(ctx, term, chunk);
         if (!ctx.hasConnectedRef.current) {
           ctx.updateStatus("connected");
           setTimeout(() => {

components/terminal/runtime/createXTermRuntime.ts

@@ -17,6 +17,11 @@ import {
   type XTermPlatform,
   resolveXTermPerformanceConfig,
 } from "../../../infrastructure/config/xtermPerformance";
+import {
+  shouldEnableNativeUserInputAutoScroll,
+  shouldScrollOnTerminalInput,
+  shouldScrollOnTerminalPaste,
+} from "../../../domain/terminalScroll";
 import { logger } from "../../../lib/logger";
 import { isMacPlatform, normalizeLineEndings, wrapBracketedPaste } from "../../../lib/utils";
 import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
@@ -148,7 +153,7 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
   const fontWeightBold = settings?.fontWeightBold ?? 700;
   const lineHeight = 1 + (settings?.linePadding ?? 0) / 10;
   const minimumContrastRatio = settings?.minimumContrastRatio ?? 1;
-  const scrollOnUserInput = settings?.scrollOnInput ?? true;
+  const scrollOnUserInput = shouldEnableNativeUserInputAutoScroll(settings);
   const altIsMeta = settings?.altAsMeta ?? false;
   const wordSeparator = settings?.wordSeparators ?? " ()[]{}'\"";
   const keywordHighlightRules = settings?.keywordHighlightRules ?? [];
@@ -202,6 +207,7 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
     drawBoldTextInBrightColors,
     minimumContrastRatio,
     scrollOnUserInput,
+    macOptionClickForcesSelection: true,
     altClickMovesCursor: !altIsMeta,
     wordSeparator,
     theme: {
@@ -335,6 +341,24 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
 
   const appLevelActions = getAppLevelActions();
   const terminalActions = getTerminalPassthroughActions();
+  const scrollViewportToBottom = () => {
+    term.scrollToBottom();
+    if (typeof requestAnimationFrame === "function") {
+      requestAnimationFrame(() => {
+        term.scrollToBottom();
+      });
+    }
+  };
+  const scrollToBottomAfterPaste = () => {
+    if (shouldScrollOnTerminalPaste(ctx.terminalSettingsRef.current)) {
+      scrollViewportToBottom();
+    }
+  };
+  const scrollToBottomAfterInput = (data: string) => {
+    if (shouldScrollOnTerminalInput(ctx.terminalSettingsRef.current, data)) {
+      term.scrollToBottom();
+    }
+  };
 
   term.attachCustomKeyEventHandler((e: KeyboardEvent) => {
     if (e.type !== "keydown") {
@@ -421,6 +445,7 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
               let data = normalizeLineEndings(text);
               if (term.modes.bracketedPasteMode && !ctx.terminalSettingsRef.current?.disableBracketedPaste) data = wrapBracketedPaste(data);
               ctx.terminalBackend.writeToSession(id, data);
+              scrollToBottomAfterPaste();
             }
           });
           break;
@@ -456,6 +481,7 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
           let data = normalizeLineEndings(text);
           if (term.modes.bracketedPasteMode && !ctx.terminalSettingsRef.current?.disableBracketedPaste) data = wrapBracketedPaste(data);
           ctx.terminalBackend.writeToSession(ctx.sessionRef.current, data);
+          scrollToBottomAfterPaste();
         }
       } catch (err) {
         logger.warn("[Terminal] Failed to paste from clipboard:", err);
@@ -536,6 +562,8 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
         ctx.onBroadcastInputRef.current(data, ctx.sessionId);
       }
 
+      scrollToBottomAfterInput(data);
+
       if (ctx.statusRef.current === "connected" && ctx.onCommandExecuted) {
         if (data === "\r" || data === "\n") {
           const cmd = ctx.commandBufferRef.current.trim();
@@ -562,7 +590,7 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
 
   // Register OSC 7 handler using xterm.js parser
   // OSC 7 is the standard way for shells to report the current working directory
-  term.parser.registerOscHandler(7, (data) => {
+  const osc7Disposable = term.parser.registerOscHandler(7, (data) => {
     try {
       // data is the content after "7;" - typically "file://hostname/path"
       if (data.startsWith('file://')) {
@@ -610,6 +638,7 @@ export const createXTermRuntime = (ctx: CreateXTermRuntimeContext): XTermRuntime
     dispose: () => {
       cleanupMiddleClick?.();
       keywordHighlighter.dispose();
+      osc7Disposable.dispose();
       try {
         term.dispose();
       } catch (err) {

domain/host.ts

@@ -13,6 +13,7 @@ export const normalizeDistroId = (value?: string) => {
   if (v.includes('amzn') || v.includes('amazon') || v.includes('aws')) return 'amazon';
   if (v.includes('opensuse') || v.includes('suse') || v.includes('sles')) return 'opensuse';
   if (v.includes('red hat') || v.includes('redhat') || v.includes('rhel')) return 'redhat';
+  if (v.includes('almalinux')) return 'almalinux';
   if (v.includes('oracle')) return 'oracle';
   if (v.includes('kali')) return 'kali';
   return '';

domain/models.ts

@@ -438,15 +438,79 @@ export interface TerminalSettings {
   rendererType: 'auto' | 'webgl' | 'canvas'; // Terminal renderer: auto (detect based on hardware), webgl, or canvas
 }
 
+const STRICT_IPV4_OCTET_PATTERN = '(?:25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)';
+
+export const URL_HIGHLIGHT_PATTERN =
+  "(?:\\bhttps?:\\/\\/\\[[0-9A-Fa-f:.]+\\](?::\\d+)?(?:[/?#][^\\s<>\"'`]*)?(?<![.,;:!?\\)}])|\\b(?:https?:\\/\\/|www\\.)[^\\s<>\"'`]+(?<![.,;:!?\\])}]))";
+export const IPV4_HIGHLIGHT_PATTERN =
+  `(?<![\\w.])(?<!\\bver\\s)(?<!\\bversion\\s)(?:${STRICT_IPV4_OCTET_PATTERN}\\.){3}${STRICT_IPV4_OCTET_PATTERN}(?![\\w.])`;
+export const MAC_ADDRESS_HIGHLIGHT_PATTERN =
+  '\\b([0-9A-Fa-f]{2}[:-]){5}[0-9A-Fa-f]{2}\\b';
+
 export const DEFAULT_KEYWORD_HIGHLIGHT_RULES: KeywordHighlightRule[] = [
   { id: 'error', label: 'Error', patterns: ['\\[error\\]', '\\[err\\]', '\\berror\\b', '\\bfail(ed)?\\b', '\\bfatal\\b', '\\bcritical\\b', '\\bexception\\b'], color: '#F87171', enabled: true },
   { id: 'warning', label: 'Warning', patterns: ['\\[warn(ing)?\\]', '\\bwarn(ing)?\\b', '\\bcaution\\b', '\\bdeprecated\\b'], color: '#FBBF24', enabled: true },
   { id: 'ok', label: 'OK', patterns: ['\\[ok\\]', '\\bok\\b', '\\bsuccess(ful)?\\b', '\\bpassed\\b', '\\bcompleted\\b', '\\bdone\\b'], color: '#34D399', enabled: true },
   { id: 'info', label: 'Info', patterns: ['\\[info\\]', '\\[notice\\]', '\\[note\\]', '\\bnotice\\b', '\\bnote\\b'], color: '#3B82F6', enabled: true },
   { id: 'debug', label: 'Debug', patterns: ['\\[debug\\]', '\\[trace\\]', '\\[verbose\\]', '\\bdebug\\b', '\\btrace\\b', '\\bverbose\\b'], color: '#A78BFA', enabled: true },
-  { id: 'ip-mac', label: 'IP address & MAC', patterns: ['\\b(?:\\d{1,3}\\.){3}\\d{1,3}\\b', '\\b([0-9A-Fa-f]{2}[:-]){5}[0-9A-Fa-f]{2}\\b'], color: '#EC4899', enabled: true },
+  { id: 'ip-mac', label: 'URL, IP & MAC', patterns: [URL_HIGHLIGHT_PATTERN, IPV4_HIGHLIGHT_PATTERN, MAC_ADDRESS_HIGHLIGHT_PATTERN], color: '#EC4899', enabled: true },
 ];
 
+const cloneKeywordHighlightRule = (rule: KeywordHighlightRule): KeywordHighlightRule => ({
+  ...rule,
+  patterns: [...rule.patterns],
+});
+
+export const normalizeKeywordHighlightRules = (
+  rules?: KeywordHighlightRule[],
+): KeywordHighlightRule[] => {
+  if (!rules || rules.length === 0) {
+    return DEFAULT_KEYWORD_HIGHLIGHT_RULES.map(cloneKeywordHighlightRule);
+  }
+
+  const defaultRulesById = new Map(
+    DEFAULT_KEYWORD_HIGHLIGHT_RULES.map((rule) => [rule.id, rule] as const),
+  );
+
+  const normalizedRules = rules.map((rule) => {
+    const defaultRule = defaultRulesById.get(rule.id);
+    if (!defaultRule) {
+      return cloneKeywordHighlightRule(rule);
+    }
+
+    return {
+      ...defaultRule,
+      color: rule.color,
+      enabled: rule.enabled,
+    };
+  });
+
+  const existingRuleIds = new Set(normalizedRules.map((rule) => rule.id));
+  for (const defaultRule of DEFAULT_KEYWORD_HIGHLIGHT_RULES) {
+    if (!existingRuleIds.has(defaultRule.id)) {
+      normalizedRules.push(cloneKeywordHighlightRule(defaultRule));
+    }
+  }
+
+  return normalizedRules;
+};
+
+export const normalizeTerminalSettings = (
+  settings?: Partial<TerminalSettings> | null,
+): TerminalSettings => {
+  const mergedSettings = {
+    ...DEFAULT_TERMINAL_SETTINGS,
+    ...(settings ?? {}),
+  };
+
+  return {
+    ...mergedSettings,
+    keywordHighlightRules: normalizeKeywordHighlightRules(
+      mergedSettings.keywordHighlightRules,
+    ),
+  };
+};
+
 export const DEFAULT_TERMINAL_SETTINGS: TerminalSettings = {
   scrollback: 10000,
   drawBoldInBrightColors: true,
@@ -600,6 +664,10 @@ export interface TransferTask {
   targetPath: string;
   sourceConnectionId: string;
   targetConnectionId: string;
+  targetHostId?: string;
+  /** Full endpoint key (hostId:hostname:port:protocol) for distinguishing
+   * same-hostId uploads with different session-time overrides. */
+  targetConnectionKey?: string;
   direction: TransferDirection;
   status: TransferStatus;
   totalBytes: number;

domain/sync.ts

@@ -52,6 +52,7 @@ export interface WebDAVConfig {
   username?: string;
   password?: string;
   token?: string;
+  allowInsecure?: boolean;
 }
 
 export interface S3Config {
@@ -111,6 +112,17 @@ export interface ProviderConnection {
   error?: string;
 }
 
+export const hasProviderConnectionData = (
+  connection: Pick<ProviderConnection, 'tokens' | 'config'>,
+): boolean => Boolean(connection.tokens || connection.config);
+
+export const isProviderReadyForSync = (
+  connection: Pick<ProviderConnection, 'status' | 'tokens' | 'config'>,
+): boolean =>
+  connection.status === 'connected'
+  || connection.status === 'syncing'
+  || (connection.status === 'error' && hasProviderConnectionData(connection));
+
 // ============================================================================
 // Encrypted Sync File Schema
 // ============================================================================
@@ -150,7 +162,8 @@ export interface SyncPayload {
   identities?: import('./models').Identity[];
   snippets: import('./models').Snippet[];
   customGroups: string[];
-  
+  snippetPackages?: string[];
+
   // Port forwarding rules
   portForwardingRules?: import('./models').PortForwardingRule[];
   

domain/syncPayload.ts

@@ -0,0 +1,108 @@
+/**
+ * Sync Payload Builders — Single source of truth for constructing and applying
+ * the encrypted cloud-sync payload.
+ *
+ * Both the main window (App.tsx) and the settings window (SettingsSyncTab.tsx)
+ * must use these helpers to guarantee every field is included and no data is
+ * silently dropped.
+ */
+
+import type {
+  Host,
+  Identity,
+  KnownHost,
+  PortForwardingRule,
+  Snippet,
+  SSHKey,
+} from './models';
+import type { SyncPayload } from './sync';
+
+// ---------------------------------------------------------------------------
+// Input types
+// ---------------------------------------------------------------------------
+
+/** All vault-owned data that participates in cloud sync. */
+export interface SyncableVaultData {
+  hosts: Host[];
+  keys: SSHKey[];
+  identities: Identity[];
+  snippets: Snippet[];
+  customGroups: string[];
+  snippetPackages?: string[];
+  knownHosts: KnownHost[];
+}
+
+/** Callbacks used by `applySyncPayload` to import data into local state. */
+export interface SyncPayloadImporters {
+  /** Import vault data (hosts, keys, identities, snippets, customGroups, snippetPackages, knownHosts). */
+  importVaultData: (jsonString: string) => void;
+  /** Import port-forwarding rules (lives outside the vault hook). */
+  importPortForwardingRules?: (rules: PortForwardingRule[]) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Builders
+// ---------------------------------------------------------------------------
+
+/**
+ * Build a complete `SyncPayload` from local data.
+ *
+ * Port-forwarding rules are optional because they are managed by a separate
+ * state hook (`usePortForwardingState`).  Callers should strip transient
+ * runtime fields (status, error, lastUsedAt) before passing them in.
+ */
+export function buildSyncPayload(
+  vault: SyncableVaultData,
+  portForwardingRules?: PortForwardingRule[],
+): SyncPayload {
+  return {
+    hosts: vault.hosts,
+    keys: vault.keys,
+    identities: vault.identities,
+    snippets: vault.snippets,
+    customGroups: vault.customGroups,
+    snippetPackages: vault.snippetPackages,
+    knownHosts: vault.knownHosts,
+    portForwardingRules,
+    syncedAt: Date.now(),
+  };
+}
+
+/**
+ * Apply a downloaded `SyncPayload` to local state via the provided importers.
+ *
+ * This ensures both vault data and port-forwarding rules are imported
+ * consistently across windows.
+ */
+export function applySyncPayload(
+  payload: SyncPayload,
+  importers: SyncPayloadImporters,
+): void {
+  // Build the vault import object.  knownHosts is only included when the
+  // payload explicitly carries the field (even if it's []).  Legacy cloud
+  // snapshots may omit it entirely — in that case we leave the local
+  // known-hosts list untouched rather than destructively wiping it.
+  const vaultImport: Record<string, unknown> = {
+    hosts: payload.hosts,
+    keys: payload.keys,
+    identities: payload.identities,
+    snippets: payload.snippets,
+    customGroups: payload.customGroups,
+  };
+  if (payload.snippetPackages !== undefined) {
+    vaultImport.snippetPackages = payload.snippetPackages;
+  }
+  if (payload.knownHosts !== undefined) {
+    vaultImport.knownHosts = payload.knownHosts;
+  }
+
+  importers.importVaultData(JSON.stringify(vaultImport));
+
+  // Only import port-forwarding rules when the payload explicitly carries
+  // them.  Absent field = "payload was created before this feature existed",
+  // so local rules are preserved.  Explicitly present [] = "remote has no
+  // rules, clear local state".
+  if (payload.portForwardingRules !== undefined && importers.importPortForwardingRules) {
+    importers.importPortForwardingRules(payload.portForwardingRules);
+  }
+}

domain/terminalScroll.ts

@@ -0,0 +1,44 @@
+import type { TerminalSettings } from "./models";
+
+const hasPrintableTerminalInput = (data: string): boolean => {
+  if (data.includes("\x1b")) {
+    return false;
+  }
+
+  for (const char of data) {
+    const codePoint = char.codePointAt(0);
+    if (codePoint === undefined) {
+      continue;
+    }
+    if (codePoint >= 0x20 && codePoint !== 0x7f && codePoint !== 0x1b) {
+      return true;
+    }
+  }
+  return false;
+};
+
+export const shouldEnableNativeUserInputAutoScroll = (
+  settings?: Partial<TerminalSettings> | null,
+): boolean => settings?.scrollOnInput ?? true;
+
+export const shouldScrollOnTerminalInput = (
+  settings: Partial<TerminalSettings> | null | undefined,
+  data: string,
+): boolean => {
+  const scrollOnInput = settings?.scrollOnInput ?? true;
+  const scrollOnKeyPress = settings?.scrollOnKeyPress ?? false;
+
+  if (!scrollOnInput && !scrollOnKeyPress) {
+    return false;
+  }
+
+  return hasPrintableTerminalInput(data) ? scrollOnInput : scrollOnKeyPress;
+};
+
+export const shouldScrollOnTerminalOutput = (
+  settings?: Partial<TerminalSettings> | null,
+): boolean => settings?.scrollOnOutput ?? false;
+
+export const shouldScrollOnTerminalPaste = (
+  settings?: Partial<TerminalSettings> | null,
+): boolean => settings?.scrollOnPaste ?? true;

electron-builder.config.cjs

@@ -90,5 +90,13 @@ module.exports = {
             }
         ],
         category: 'Development'
-    }
+    },
+    publish: [
+        {
+            provider: 'github',
+            owner: 'binaricat',
+            repo: 'Netcatty',
+            releaseType: 'release'
+        }
+    ]
 };

electron/bridges/autoUpdateBridge.cjs

@@ -0,0 +1,323 @@
+/**
+ * Auto-Update Bridge
+ *
+ * Wraps electron-updater to provide IPC-driven update checks, downloads, and
+ * install-on-quit. Designed around a "prompt" model: the renderer asks to
+ * check, then explicitly triggers download and install.
+ *
+ * Platforms where auto-update is NOT supported (Linux deb/rpm/snap) get a
+ * graceful { available: false, error } response so the renderer can fall back
+ * to a manual "open GitHub releases" link.
+ */
+
+let _deps = null;
+
+/**
+ * Returns true when the current packaging format supports electron-updater
+ * (macOS zip/dmg, Windows NSIS, Linux AppImage).
+ */
+function isAutoUpdateSupported() {
+  if (process.platform === "darwin" || process.platform === "win32") {
+    return true;
+  }
+  // Linux: only AppImage supports in-place update.
+  // The APPIMAGE env variable is set by the AppImage runtime.
+  if (process.platform === "linux" && process.env.APPIMAGE) {
+    return true;
+  }
+  return false;
+}
+
+/** Lazily resolved autoUpdater — avoids importing electron-updater in
+ *  contexts where native modules might not be available. */
+let _autoUpdater = null;
+
+/** Guard against duplicate listener registration */
+let _listenersRegistered = false;
+
+/** Track whether a download is in progress to distinguish download errors from check errors */
+let _isDownloading = false;
+
+/** Track whether a checkForUpdates call is in flight (set before call, cleared on result event) */
+let _isChecking = false;
+
+/**
+ * Snapshot of the last known update status so newly opened windows can hydrate
+ * without waiting for the next IPC event.
+ * @type {{ status: 'idle' | 'downloading' | 'ready' | 'error', percent: number, error: string | null, version: string | null, isChecking: boolean }}
+ */
+let _lastStatus = { status: 'idle', percent: 0, error: null, version: null, isChecking: false };
+function getAutoUpdater() {
+  if (_autoUpdater) return _autoUpdater;
+  try {
+    const { autoUpdater } = require("electron-updater");
+    autoUpdater.autoDownload = true;
+    autoUpdater.autoInstallOnAppQuit = false;
+    // Silence the default electron-log transport (we log ourselves).
+    autoUpdater.logger = null;
+    _autoUpdater = autoUpdater;
+    return autoUpdater;
+  } catch (err) {
+    console.error("[AutoUpdate] Failed to load electron-updater:", err?.message || err);
+    return null;
+  }
+}
+
+/**
+ * Register persistent global IPC event listeners for auto-download flow.
+ * Called once in init(). Forwards electron-updater events to the renderer
+ * even when no manual download was initiated.
+ */
+function setupGlobalListeners() {
+  if (_listenersRegistered) return;
+  const updater = getAutoUpdater();
+  if (!updater) return;
+  _listenersRegistered = true;
+
+  updater.on("update-not-available", () => {
+    _isChecking = false;
+    // Reset stale status so late-opening windows don't hydrate from a
+    // previous 'error' or 'ready' snapshot after a "no update" check.
+    _lastStatus = { status: 'idle', percent: 0, error: null, version: null, isChecking: false };
+    broadcastToAllWindows("netcatty:update:update-not-available", {});
+  });
+
+  updater.on("update-available", (info) => {
+    _isChecking = false;
+    // autoDownload=true means the download begins immediately after this event
+    _isDownloading = true;
+    _lastStatus = { status: 'downloading', percent: 0, error: null, version: info.version || null, isChecking: false };
+    broadcastToAllWindows("netcatty:update:update-available", {
+      version: info.version || "",
+      releaseNotes: typeof info.releaseNotes === "string" ? info.releaseNotes : "",
+      releaseDate: info.releaseDate || null,
+    });
+  });
+
+  updater.on("download-progress", (info) => {
+    _lastStatus.percent = Math.round(info.percent ?? 0);
+    broadcastToAllWindows("netcatty:update:download-progress", {
+      percent: info.percent ?? 0,
+      bytesPerSecond: info.bytesPerSecond ?? 0,
+      transferred: info.transferred ?? 0,
+      total: info.total ?? 0,
+    });
+  });
+
+  updater.on("update-downloaded", () => {
+    _isDownloading = false;
+    _lastStatus = { ..._lastStatus, status: 'ready', percent: 100 };
+    broadcastToAllWindows("netcatty:update:downloaded");
+  });
+
+  updater.on("error", (err) => {
+    _isChecking = false;
+    // Only broadcast download-phase errors; check-phase errors (e.g. network failures
+    // during checkForUpdates) are not download failures and must not set autoDownloadStatus.
+    if (!_isDownloading) {
+      _lastStatus = { ..._lastStatus, isChecking: false };
+      console.warn("[AutoUpdate] Check-phase error (not broadcast to renderer):", err?.message || err);
+      return;
+    }
+    _isDownloading = false;
+    const errorMsg = err?.message || "Unknown update error";
+    _lastStatus = { ..._lastStatus, status: 'error', error: errorMsg };
+    broadcastToAllWindows("netcatty:update:error", {
+      error: errorMsg,
+    });
+  });
+
+  console.log("[AutoUpdate] Global listeners registered");
+}
+
+/**
+ * Trigger an automatic update check after a delay.
+ * No-op on platforms that don't support auto-update (Linux deb/rpm/snap).
+ * Called from main process after the main window is created.
+ *
+ * @param {number} delayMs - Milliseconds to wait before checking (default: 5000)
+ */
+let _autoCheckTimer = null;
+
+function startAutoCheck(delayMs = 5000) {
+  if (!isAutoUpdateSupported()) {
+    console.log("[AutoUpdate] Platform does not support auto-update, skipping auto-check");
+    return;
+  }
+  _autoCheckTimer = setTimeout(async () => {
+    _autoCheckTimer = null;
+    const updater = getAutoUpdater();
+    if (!updater) {
+      console.warn("[AutoUpdate] Auto-check skipped — updater not available");
+      return;
+    }
+    _isChecking = true;
+    _lastStatus = { ..._lastStatus, isChecking: true };
+    try {
+      console.log("[AutoUpdate] Starting automatic update check...");
+      await updater.checkForUpdates();
+    } catch (err) {
+      _isChecking = false;
+      _lastStatus = { ..._lastStatus, isChecking: false };
+      console.warn("[AutoUpdate] Auto-check failed:", err?.message || err);
+    }
+  }, delayMs);
+}
+
+/**
+ * Cancel a pending startAutoCheck timer.  Called when the renderer triggers
+ * a manual check to avoid racing with the queued auto-check.
+ */
+function cancelAutoCheck() {
+  if (_autoCheckTimer) {
+    clearTimeout(_autoCheckTimer);
+    _autoCheckTimer = null;
+  }
+}
+
+function init(deps) {
+  _deps = deps;
+  setupGlobalListeners();
+}
+
+/**
+ * Broadcast an IPC event to all non-destroyed BrowserWindows.
+ * Ensures both the main window and settings window always receive
+ * auto-update events.
+ * @param {string} channel
+ * @param {unknown} [payload]
+ */
+function broadcastToAllWindows(channel, payload) {
+  try {
+    const { BrowserWindow } = _deps?.electronModule || {};
+    if (!BrowserWindow) return;
+    const windows = BrowserWindow.getAllWindows();
+    for (const win of windows) {
+      if (!win.isDestroyed()) {
+        if (payload !== undefined) {
+          win.webContents.send(channel, payload);
+        } else {
+          win.webContents.send(channel);
+        }
+      }
+    }
+  } catch (err) {
+    console.warn("[AutoUpdate] broadcastToAllWindows failed:", err?.message || err);
+  }
+}
+
+function registerHandlers(ipcMain) {
+  // ---- Check for updates ------------------------------------------------
+  ipcMain.handle("netcatty:update:check", async () => {
+    // Cancel any pending auto-check to prevent concurrent checkForUpdates()
+    // calls — electron-updater rejects them and surfaces false errors.
+    cancelAutoCheck();
+
+    if (!isAutoUpdateSupported()) {
+      return {
+        available: false,
+        supported: false,
+        error: "Auto-update is not supported on this platform/package format.",
+      };
+    }
+
+    const updater = getAutoUpdater();
+    if (!updater) {
+      return {
+        available: false,
+        supported: false,
+        error: "Update module failed to load.",
+      };
+    }
+
+    // If a check is already in flight (e.g. from startAutoCheck), don't
+    // start a concurrent one — electron-updater rejects it and surfaces a
+    // confusing error.  Return a sentinel so the renderer knows to wait.
+    if (_isChecking) {
+      return { available: false, supported: true, checking: true };
+    }
+
+    try {
+      _isChecking = true;
+      _lastStatus = { ..._lastStatus, isChecking: true };
+      const result = await updater.checkForUpdates();
+      if (!result || !result.updateInfo) {
+        return { available: false, supported: true };
+      }
+
+      const { version, releaseNotes, releaseDate } = result.updateInfo;
+
+      // Compare with current version using semver ordering.
+      // Only report an update when the feed version is strictly newer,
+      // avoiding false positives for pre-release or nightly builds.
+      const { app } = _deps?.electronModule || {};
+      const currentVersion = app?.getVersion?.() || "0.0.0";
+      const isNewer = currentVersion.localeCompare(version, undefined, { numeric: true, sensitivity: 'base' }) < 0;
+      if (!isNewer) {
+        return { available: false, supported: true };
+      }
+
+      return {
+        available: true,
+        supported: true,
+        version,
+        releaseNotes: typeof releaseNotes === "string" ? releaseNotes : "",
+        releaseDate: releaseDate || null,
+      };
+    } catch (err) {
+      _isChecking = false;
+      _lastStatus = { ..._lastStatus, isChecking: false };
+      console.warn("[AutoUpdate] Check failed:", err?.message || err);
+      return {
+        available: false,
+        supported: true,
+        error: err?.message || "Unknown update check error",
+      };
+    }
+  });
+
+  // ---- Download update ---------------------------------------------------
+  ipcMain.handle("netcatty:update:download", async () => {
+    const updater = getAutoUpdater();
+    if (!updater) {
+      return { success: false, error: "Update module not available." };
+    }
+    try {
+      // Global listeners (registered in setupGlobalListeners) handle all
+      // progress/downloaded/error events. Just trigger the download.
+      await updater.downloadUpdate();
+      return { success: true };
+    } catch (err) {
+      console.error("[AutoUpdate] Download failed:", err?.message || err);
+      return { success: false, error: err?.message || "Download failed" };
+    }
+  });
+
+  // ---- Get current update status (for late-opening windows) ---------------
+  ipcMain.handle("netcatty:update:getStatus", () => {
+    return { ..._lastStatus };
+  });
+
+  // ---- Install (quit & install) ------------------------------------------
+  ipcMain.handle("netcatty:update:install", () => {
+    const updater = getAutoUpdater();
+    if (!updater) return;
+
+    // On macOS, the system tray keeps the app process alive even after all
+    // windows are closed, which prevents quitAndInstall from completing.
+    // Destroy the tray (and its panel window) before quitting so the app
+    // can exit cleanly and the installer can proceed.
+    try {
+      const globalShortcutBridge = require("./globalShortcutBridge.cjs");
+      globalShortcutBridge.cleanup();
+    } catch {
+      // ignore — bridge may not be available
+    }
+
+    updater.quitAndInstall(false, true);
+  });
+
+  console.log("[AutoUpdate] Handlers registered");
+}
+
+module.exports = { init, registerHandlers, isAutoUpdateSupported, startAutoCheck };

electron/bridges/cloudSyncBridge.cjs

@@ -1,4 +1,5 @@
 const { createClient, AuthType } = require("webdav");
+const https = require("https");
 const {
   S3Client,
   HeadObjectCommand,
@@ -50,6 +51,10 @@ const buildError = (message, details) => {
 const buildWebdavClient = (config) => {
   if (!config) throw new Error("Missing WebDAV config");
   const endpoint = normalizeEndpoint(config.endpoint);
+  const extraOpts = {};
+  if (config.allowInsecure) {
+    extraOpts.httpsAgent = new https.Agent({ rejectUnauthorized: false });
+  }
   if (config.authType === "token") {
     return createClient(endpoint, {
       authType: AuthType.Token,
@@ -57,6 +62,7 @@ const buildWebdavClient = (config) => {
         access_token: config.token || "",
         token_type: "Bearer",
       },
+      ...extraOpts,
     });
   }
   if (config.authType === "digest") {
@@ -64,12 +70,14 @@ const buildWebdavClient = (config) => {
       authType: AuthType.Digest,
       username: config.username || "",
       password: config.password || "",
+      ...extraOpts,
     });
   }
   return createClient(endpoint, {
     authType: AuthType.Password,
     username: config.username || "",
     password: config.password || "",
+    ...extraOpts,
   });
 };
 

electron/bridges/portForwardingBridge.cjs

@@ -100,8 +100,11 @@ async function startPortForward(event, payload) {
   }));
 
   return new Promise((resolve, reject) => {
+    // Track whether the Promise has been settled so conn.on('close')
+    // can reject if the tunnel was killed during SSH handshake.
+    let settled = false;
 
-    conn.on('ready', () => {
+    conn.once('ready', () => {
       console.log(`[PortForward] SSH connection ready for tunnel ${tunnelId}`);
 
       if (type === 'local') {
@@ -131,6 +134,7 @@ async function startPortForward(event, payload) {
           sendStatus('error', err.message);
           conn.end();
           portForwardingTunnels.delete(tunnelId);
+          settled = true;
           reject(err);
         });
 
@@ -140,9 +144,11 @@ async function startPortForward(event, payload) {
             type: 'local',
             conn,
             server,
+            status: 'active',
             webContentsId: sender.id
           });
           sendStatus('active');
+          settled = true;
           resolve({ tunnelId, success: true });
         });
 
@@ -153,6 +159,7 @@ async function startPortForward(event, payload) {
             console.error(`[PortForward] Remote forward error:`, err.message);
             sendStatus('error', err.message);
             conn.end();
+            settled = true;
             reject(err);
             return;
           }
@@ -161,9 +168,11 @@ async function startPortForward(event, payload) {
           portForwardingTunnels.set(tunnelId, {
             type: 'remote',
             conn,
+            status: 'active',
             webContentsId: sender.id
           });
           sendStatus('active');
+          settled = true;
           resolve({ tunnelId, success: true });
         });
 
@@ -265,6 +274,7 @@ async function startPortForward(event, payload) {
           sendStatus('error', err.message);
           conn.end();
           portForwardingTunnels.delete(tunnelId);
+          settled = true;
           reject(err);
         });
 
@@ -274,26 +284,32 @@ async function startPortForward(event, payload) {
             type: 'dynamic',
             conn,
             server,
+            status: 'active',
             webContentsId: sender.id
           });
           sendStatus('active');
+          settled = true;
           resolve({ tunnelId, success: true });
         });
       } else {
+        settled = true;
         reject(new Error(`Unknown forwarding type: ${type}`));
       }
     });
 
-    conn.on('error', (err) => {
+    conn.once('error', (err) => {
       console.error(`[PortForward] SSH error:`, err.message);
       sendStatus('error', err.message);
       portForwardingTunnels.delete(tunnelId);
+      settled = true;
       reject(err);
     });
 
-    conn.on('close', () => {
+    conn.once('close', () => {
       console.log(`[PortForward] SSH connection closed for tunnel ${tunnelId}`);
       const tunnel = portForwardingTunnels.get(tunnelId);
+      // Capture the cancelled flag BEFORE cleanup deletes the entry.
+      const wasCancelled = !!tunnel?.cancelled;
       if (tunnel) {
         if (tunnel.server) {
           try { tunnel.server.close(); } catch { }
@@ -301,9 +317,30 @@ async function startPortForward(event, payload) {
         sendStatus('inactive');
         portForwardingTunnels.delete(tunnelId);
       }
+      // If the Promise was never settled (tunnel killed during
+      // handshake by stopPortForwardByRuleId), settle it.
+      if (!settled) {
+        settled = true;
+        if (wasCancelled) {
+          resolve({ tunnelId, success: false, cancelled: true });
+        } else {
+          reject(new Error(`Tunnel ${tunnelId} closed before connection established`));
+        }
+      }
     });
 
     sendStatus('connecting');
+    // Register the connection BEFORE the handshake starts so that
+    // stopPortForwardByRuleId can find and kill it at any point,
+    // including during the SSH handshake window.  The conn.on('ready')
+    // handler updates the entry to include the server object later.
+    portForwardingTunnels.set(tunnelId, {
+      type,
+      conn,
+      server: null,
+      status: 'connecting',
+      webContentsId: sender.id,
+    });
     conn.connect(connectOpts);
   });
 }
@@ -320,13 +357,17 @@ async function stopPortForward(event, payload) {
   }
 
   try {
+    // Mark as cancelled so conn.on('close') resolves gracefully
+    // instead of rejecting for in-flight handshakes.
+    tunnel.cancelled = true;
     if (tunnel.server) {
       tunnel.server.close();
     }
     if (tunnel.conn) {
       tunnel.conn.end();
     }
-    portForwardingTunnels.delete(tunnelId);
+    // Don't delete here — let conn.on('close') handle cleanup
+    // so it can read the cancelled flag.
 
     return { tunnelId, success: true };
   } catch (err) {
@@ -345,7 +386,7 @@ async function getPortForwardStatus(event, payload) {
     return { tunnelId, status: 'inactive' };
   }
 
-  return { tunnelId, status: 'active', type: tunnel.type };
+  return { tunnelId, status: tunnel.status || 'active', type: tunnel.type };
 }
 
 /**
@@ -357,7 +398,7 @@ async function listPortForwards() {
     list.push({
       tunnelId,
       type: tunnel.type,
-      status: 'active',
+      status: tunnel.status || 'active',
     });
   }
   return list;
@@ -370,21 +411,54 @@ function stopAllPortForwards() {
   console.log(`[PortForward] Stopping all ${portForwardingTunnels.size} active tunnels...`);
   for (const [tunnelId, tunnel] of portForwardingTunnels) {
     try {
+      // Mark as cancelled so conn.on('close') resolves gracefully
+      // instead of rejecting with an error for in-flight handshakes.
+      tunnel.cancelled = true;
       if (tunnel.server) {
         tunnel.server.close();
       }
       if (tunnel.conn) {
         tunnel.conn.end();
       }
+      // Don't delete here — let conn.on('close') handle cleanup
+      // so it can read the cancelled flag.
       console.log(`[PortForward] Stopped tunnel ${tunnelId}`);
     } catch (err) {
       console.warn(`[PortForward] Failed to stop tunnel ${tunnelId}:`, err.message);
     }
   }
-  portForwardingTunnels.clear();
   console.log('[PortForward] All tunnels stopped');
 }
 
+/**
+ * Stop all active port forwards for a given rule ID.
+ * Tunnel IDs follow the format `pf-{ruleId}-{timestamp}`, so we match
+ * by checking if the tunnelId contains the ruleId.
+ * This catches tunnels in ANY state (connecting, active) because it
+ * operates on the main-process portForwardingTunnels map directly.
+ */
+function stopPortForwardByRuleId(_event, { ruleId }) {
+  let stopped = 0;
+  for (const [tunnelId, tunnel] of portForwardingTunnels) {
+    if (tunnelId.includes(ruleId)) {
+      try {
+        // Mark as intentionally cancelled BEFORE conn.end() so the
+        // close handler resolves gracefully instead of rejecting.
+        tunnel.cancelled = true;
+        if (tunnel.server) tunnel.server.close();
+        if (tunnel.conn) tunnel.conn.end();
+        // Don't delete here — let the conn.on('close') handler delete
+        // the entry so it can read tunnel.cancelled first.
+        console.log(`[PortForward] Stopped tunnel ${tunnelId} for rule ${ruleId}`);
+        stopped++;
+      } catch (err) {
+        console.warn(`[PortForward] Failed to stop tunnel ${tunnelId}:`, err.message);
+      }
+    }
+  }
+  return { stopped };
+}
+
 /**
  * Register IPC handlers for port forwarding operations
  */
@@ -393,6 +467,8 @@ function registerHandlers(ipcMain) {
   ipcMain.handle("netcatty:portforward:stop", stopPortForward);
   ipcMain.handle("netcatty:portforward:status", getPortForwardStatus);
   ipcMain.handle("netcatty:portforward:list", listPortForwards);
+  ipcMain.handle("netcatty:portforward:stopAll", () => stopAllPortForwards());
+  ipcMain.handle("netcatty:portforward:stopByRuleId", stopPortForwardByRuleId);
 }
 
 module.exports = {
@@ -402,4 +478,5 @@ module.exports = {
   getPortForwardStatus,
   listPortForwards,
   stopAllPortForwards,
+  stopPortForwardByRuleId,
 };

electron/bridges/sftpBridge.cjs

@@ -29,6 +29,7 @@ const {
   applyAuthToConnOpts,
   safeSend: authSafeSend,
   findAllDefaultPrivateKeys: findAllDefaultPrivateKeysFromHelper,
+  getAvailableAgentSocket,
 } = require("./sshAuthHelper.cjs");
 
 // SFTP clients storage - shared reference passed from main
@@ -427,7 +428,7 @@ function init(deps) {
 /**
  * Connect through a chain of jump hosts for SFTP
  */
-async function connectThroughChainForSftp(event, options, jumpHosts, targetHost, targetPort, connId) {
+async function connectThroughChainForSftp(event, options, jumpHosts, targetHost, targetPort, connId, agentSocket) {
   const sender = event.sender;
   const connections = [];
   let currentSocket = null;
@@ -498,6 +499,7 @@ async function connectThroughChainForSftp(event, options, jumpHosts, targetHost,
         logPrefix: `[SFTP Chain] Hop ${i + 1}`,
         unlockedEncryptedKeys: options._unlockedEncryptedKeys || [],
         defaultKeys,
+        sshAgentSocketOverride: agentSocket,
       });
       applyAuthToConnOpts(connOpts, authConfig);
 
@@ -516,15 +518,20 @@ async function connectThroughChainForSftp(event, options, jumpHosts, targetHost,
 
       // Connect this hop
       await new Promise((resolve, reject) => {
-        conn.on('ready', () => {
+        conn.once('ready', () => {
           console.log(`[SFTP Chain] Hop ${i + 1}/${jumpHosts.length}: ${hopLabel} connected`);
           resolve();
         });
         conn.on('error', (err) => {
+          // Filter out non-fatal agent auth errors (same as in openSftp)
+          if (err.level === 'agent') {
+            console.log(`[SFTP Chain] Hop ${i + 1} non-fatal agent auth error (will try next method):`, err.message);
+            return;
+          }
           console.error(`[SFTP Chain] Hop ${i + 1}/${jumpHosts.length}: ${hopLabel} error:`, err.message);
           reject(err);
         });
-        conn.on('timeout', () => {
+        conn.once('timeout', () => {
           console.error(`[SFTP Chain] Hop ${i + 1}/${jumpHosts.length}: ${hopLabel} timeout`);
           reject(new Error(`Connection timeout to ${hopLabel}`));
         });
@@ -828,6 +835,10 @@ async function openSftp(event, options) {
   let chainConnections = [];
   let connectionSocket = null;
 
+  // Pre-fetch agent socket (async check for Windows SSH Agent service)
+  // This is used by both jump host chain auth and final host auth
+  const agentSocket = await getAvailableAgentSocket();
+
   // Handle chain/proxy connections
   if (hasJumpHosts) {
     console.log(`[SFTP] Opening connection through ${jumpHosts.length} jump host(s) to ${options.hostname}:${options.port || 22}`);
@@ -841,7 +852,8 @@ async function openSftp(event, options) {
       jumpHosts,
       options.hostname,
       options.port || 22,
-      connId
+      connId,
+      agentSocket
     );
     connectionSocket = chainResult.socket;
     chainConnections = chainResult.connections;
@@ -895,6 +907,7 @@ async function openSftp(event, options) {
   if (options.password) connectOpts.password = options.password;
 
   // Build auth handler using shared helper
+  // Use pre-fetched agentSocket (validated async, including Windows service check)
   const authConfig = buildAuthHandler({
     privateKey: connectOpts.privateKey,
     password: connectOpts.password,
@@ -903,6 +916,7 @@ async function openSftp(event, options) {
     username: connectOpts.username,
     logPrefix: "[SFTP]",
     defaultKeys,
+    sshAgentSocketOverride: agentSocket,
   });
   applyAuthToConnOpts(connectOpts, authConfig);
 
@@ -922,44 +936,104 @@ async function openSftp(event, options) {
   connectOpts.readyTimeout = 120000; // 2 minutes for 2FA input
 
   try {
-    if (options.sudo) {
-      console.log(`[SFTP] Using sudo mode for connection: ${connId}`);
-      const sshClient = client.client;
+    // IMPORTANT: We bypass ssh2-sftp-client's connect() method and use the
+    // underlying ssh2 Client directly. This is because ssh2-sftp-client adds
+    // temporary error listeners that reject the entire connect promise on ANY
+    // error, including non-fatal auth errors (e.g. 'Failed to connect to agent'
+    // when ssh2 tries agent auth and falls through to the next method).
+    // By connecting directly, we can filter these non-fatal errors and allow
+    // the auth flow to continue to keyboard-interactive/password/etc.
+    const sshClient = client.client;
 
-      await new Promise((resolve, reject) => {
-        // Set up error handler for initial connection
-        const onConnectError = (err) => reject(err);
-        sshClient.once('error', onConnectError);
+    await new Promise((resolve, reject) => {
+      let settled = false;
+      const settle = (fn, val) => {
+        if (settled) return;
+        settled = true;
+        cleanup();
+        fn(val);
+      };
 
-        sshClient.once('ready', async () => {
-          sshClient.removeListener('error', onConnectError);
-          try {
-            // Use provided password or try empty if using key auth (and hope for nopasswd sudo)
-            const sudoPass = options.password || "";
-            const sftpWrapper = await connectSudoSftp(sshClient, sudoPass);
+      const onError = (err) => {
+        // Filter out non-fatal authentication errors.
+        // ssh2 sets err.level = 'agent' when agent auth fails — it then
+        // internally calls tryNextAuth() to proceed with the next method.
+        // We must NOT reject here, or the fallback won't execute.
+        if (err.level === 'agent') {
+          console.log('[SFTP] Non-fatal agent auth error (will try next method):', err.message);
+          return;
+        }
+        settle(reject, err);
+      };
 
-            // Inject into sftp-client
-            client.sftp = sftpWrapper;
+      const onEnd = () => {
+        settle(reject, new Error('Connection closed before SFTP session was ready'));
+      };
 
-            // Important: attach cleanup listener expected by sftp-client
-            client.sftp.on('close', () => client.end());
+      const onClose = () => {
+        settle(reject, new Error('Connection closed before SFTP session was ready'));
+      };
 
+      const cleanup = () => {
+        sshClient.removeListener('error', onError);
+        sshClient.removeListener('end', onEnd);
+        sshClient.removeListener('close', onClose);
+      };
+
+      sshClient.on('error', onError);
+      sshClient.on('end', onEnd);
+      sshClient.on('close', onClose);
+
+      sshClient.once('ready', () => {
+        cleanup();
+
+        if (options.sudo) {
+          console.log(`[SFTP] Using sudo mode for connection: ${connId}`);
+          (async () => {
+            try {
+              const sudoPass = options.password || "";
+              const sftpWrapper = await connectSudoSftp(sshClient, sudoPass);
+              client.sftp = sftpWrapper;
+              client.sftp.on('close', () => client.end());
+              resolve();
+            } catch (e) {
+              // Fallback: if sftp-server binary is missing (exit code 127),
+              // try standard SFTP subsystem instead of failing completely.
+              // This handles systems like ESXi that don't have sftp-server
+              // but support the SFTP subsystem natively.
+              if (e.message && e.message.includes('exit code 127')) {
+                console.warn('[SFTP] sftp-server not found, falling back to standard SFTP subsystem');
+                options.sudo = false; // Mark as non-sudo for downstream logic
+                sshClient.sftp((sftpErr, sftp) => {
+                  if (sftpErr) {
+                    sshClient.end();
+                    return reject(sftpErr);
+                  }
+                  client.sftp = sftp;
+                  resolve();
+                });
+              } else {
+                sshClient.end();
+                reject(e);
+              }
+            }
+          })();
+        } else {
+          // Open standard SFTP subsystem channel
+          sshClient.sftp((err, sftp) => {
+            if (err) return reject(err);
+            client.sftp = sftp;
             resolve();
-          } catch (e) {
-            sshClient.end();
-            reject(e);
-          }
-        });
-
-        try {
-          sshClient.connect(connectOpts);
-        } catch (e) {
-          reject(e);
+          });
         }
       });
-    } else {
-      await client.connect(connectOpts);
-    }
+
+      try {
+        sshClient.connect(connectOpts);
+      } catch (e) {
+        settle(reject, e);
+      }
+    });
     // Increase max listeners AFTER connect, when the internal ssh2 Client exists
     // This prevents Node.js MaxListenersExceededWarning when performing many operations
     // ssh2-sftp-client adds temporary listeners for each operation, so we need a high limit

electron/bridges/sshAuthHelper.cjs

@@ -6,6 +6,7 @@
 const fs = require("node:fs");
 const path = require("node:path");
 const os = require("node:os");
+const { exec } = require("node:child_process");
 const keyboardInteractiveHandler = require("./keyboardInteractiveHandler.cjs");
 const passphraseHandler = require("./passphraseHandler.cjs");
 
@@ -123,14 +124,58 @@ async function findAllDefaultPrivateKeys(options = {}) {
 }
 
 /**
- * Get ssh-agent socket path based on platform
+ * Check if Windows SSH Agent service is running
+ * @returns {Promise<boolean>}
+ */
+function checkWindowsSshAgentRunning() {
+  return new Promise((resolve) => {
+    if (process.platform !== "win32") {
+      resolve(true);
+      return;
+    }
+    exec("sc query ssh-agent", (err, stdout) => {
+      if (err) {
+        resolve(false);
+        return;
+      }
+      resolve(stdout.includes("RUNNING"));
+    });
+  });
+}
+
+/**
+ * Get ssh-agent socket path based on platform (synchronous, best-effort)
  * @returns {string|null}
  */
 function getSshAgentSocket() {
   if (process.platform === "win32") {
+    // On Windows, always return the pipe path; the caller should use
+    // getAvailableAgentSocket() for a reliable async check.
     return "\\\\.\\pipe\\openssh-ssh-agent";
   }
-  return process.env.SSH_AUTH_SOCK || null;
+  const agentSocket = process.env.SSH_AUTH_SOCK;
+  if (!agentSocket) return null;
+
+  try {
+    const stats = fs.statSync(agentSocket);
+    return typeof stats.isSocket === "function" && stats.isSocket()
+      ? agentSocket
+      : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Get ssh-agent socket path with async validation (checks Windows service status)
+ * @returns {Promise<string|null>}
+ */
+async function getAvailableAgentSocket() {
+  if (process.platform === "win32") {
+    const running = await checkWindowsSshAgentRunning();
+    return running ? "\\\\.\\pipe\\openssh-ssh-agent" : null;
+  }
+  return getSshAgentSocket();
 }
 
 /**
@@ -146,7 +191,7 @@ function getSshAgentSocket() {
 * @param {Array} [options.unlockedEncryptedKeys] - Array of unlocked encrypted keys with passphrases
  */
 function buildAuthHandler(options) {
-  const { privateKey, password, passphrase, agent, username, logPrefix = "[SSH]", unlockedEncryptedKeys = [], defaultKeys = [] } = options;
+  const { privateKey, password, passphrase, agent, username, logPrefix = "[SSH]", unlockedEncryptedKeys = [], defaultKeys = [], sshAgentSocketOverride } = options;
 
   // Determine what type of explicit auth the user configured
   const hasExplicitKey = !!privateKey;
@@ -158,7 +203,10 @@ function buildAuthHandler(options) {
   const isPasswordOnly = hasExplicitPassword && !hasExplicitKey && !hasExplicitAgent;
   const isKeyOnly = hasExplicitKey && !hasExplicitAgent;
 
-  const sshAgentSocket = getSshAgentSocket();
+  // Allow callers to pass in a pre-validated agent socket (e.g. from async
+  // getAvailableAgentSocket). Fall back to synchronous getSshAgentSocket()
+  // which on Windows always returns the pipe path without checking the service.
+  const sshAgentSocket = sshAgentSocketOverride !== undefined ? sshAgentSocketOverride : getSshAgentSocket();
 
   // Only use system ssh-agent BEFORE user's auth when:
   // - User explicitly configured agent, OR
@@ -512,6 +560,7 @@ module.exports = {
   findDefaultPrivateKey,
   findAllDefaultPrivateKeys,
   getSshAgentSocket,
+  getAvailableAgentSocket,
   buildAuthHandler,
   createKeyboardInteractiveHandler,
   applyAuthToConnOpts,

electron/bridges/sshBridge.cjs

@@ -20,6 +20,7 @@ const {
   safeSend: authSafeSend,
   requestPassphrasesForEncryptedKeys,
   findAllDefaultPrivateKeys: findAllDefaultPrivateKeysFromHelper,
+  getSshAgentSocket,
 } = require("./sshAuthHelper.cjs");
 
 // Default SSH key names in priority order
@@ -165,6 +166,16 @@ function checkWindowsSshAgent() {
   });
 }
 
+async function getAvailableAgentSocket() {
+  if (process.platform === "win32") {
+    const agentStatus = await checkWindowsSshAgent();
+    log("Windows SSH Agent check", agentStatus);
+    return agentStatus.running ? "\\\\.\\pipe\\openssh-ssh-agent" : null;
+  }
+
+  return getSshAgentSocket();
+}
+
 const DEBUG_SSH = process.env.NETCATTY_SSH_DEBUG === "1";
 
 // Debug logger (disabled by default)
@@ -405,17 +416,17 @@ async function connectThroughChain(event, options, jumpHosts, targetHost, target
 
       // Connect this hop
       await new Promise((resolve, reject) => {
-        conn.on('ready', () => {
+        conn.once('ready', () => {
           console.log(`[Chain] Hop ${i + 1}/${totalHops}: ${hopLabel} connected`);
           sendProgress(i + 1, totalHops + 1, hopLabel, 'connected');
           resolve();
         });
-        conn.on('error', (err) => {
+        conn.once('error', (err) => {
           console.error(`[Chain] Hop ${i + 1}/${totalHops}: ${hopLabel} error:`, err.message);
           sendProgress(i + 1, totalHops + 1, hopLabel, 'error');
           reject(err);
         });
-        conn.on('timeout', () => {
+        conn.once('timeout', () => {
           console.error(`[Chain] Hop ${i + 1}/${totalHops}: ${hopLabel} timeout`);
           reject(new Error(`Connection timeout to ${hopLabel}`));
         });
@@ -592,14 +603,7 @@ async function startSSHSession(event, options) {
     // If no primary auth method configured, try ssh-agent first, then ALL default keys
     if (!connectOpts.privateKey && !connectOpts.password && !connectOpts.agent) {
       // First, try to use ssh-agent if available (this is what regular SSH does)
-      let sshAgentSocket;
-      if (process.platform === "win32") {
-        const agentStatus = await checkWindowsSshAgent();
-        log("Windows SSH Agent check", agentStatus);
-        sshAgentSocket = agentStatus.running ? "\\\\.\\pipe\\openssh-ssh-agent" : null;
-      } else {
-        sshAgentSocket = process.env.SSH_AUTH_SOCK;
-      }
+      const sshAgentSocket = await getAvailableAgentSocket();
 
       if (sshAgentSocket) {
         log("No auth method configured, trying ssh-agent first", { agentSocket: sshAgentSocket });
@@ -627,15 +631,7 @@ async function startSSHSession(event, options) {
     // Agent forwarding
     if (options.agentForwarding) {
       if (!connectOpts.agent) {
-        if (process.platform === "win32") {
-          const agentStatus = await checkWindowsSshAgent();
-          log("Windows SSH Agent check (agentForwarding)", agentStatus);
-          if (agentStatus.running) {
-            connectOpts.agent = "\\\\.\\pipe\\openssh-ssh-agent";
-          }
-        } else {
-          connectOpts.agent = process.env.SSH_AUTH_SOCK;
-        }
+        connectOpts.agent = await getAvailableAgentSocket();
       }
       // Only enable forwarding when an agent is actually available
       if (connectOpts.agent) {
@@ -924,7 +920,7 @@ async function startSSHSession(event, options) {
 
     return new Promise((resolve, reject) => {
       const logPrefix = hasJumpHosts ? '[Chain]' : '[SSH]';
-      conn.on("ready", () => {
+      conn.once("ready", () => {
         console.log(`${logPrefix} ${options.hostname} ready`);
 
         // Cache the successful auth method
@@ -1067,28 +1063,34 @@ async function startSSHSession(event, options) {
 
         safeSend(contents, "netcatty:exit", { sessionId, exitCode: 1, error: err.message });
         sessions.delete(sessionId);
+        sessionEncodings.delete(sessionId);
+        sessionDecoders.delete(sessionId);
         for (const c of chainConnections) {
           try { c.end(); } catch { }
         }
         reject(err);
       });
 
-      conn.on("timeout", () => {
+      conn.once("timeout", () => {
         console.error(`${logPrefix} ${options.hostname} connection timeout`);
         const err = new Error(`Connection timeout to ${options.hostname}`);
         const contents = event.sender;
         safeSend(contents, "netcatty:exit", { sessionId, exitCode: 1, error: err.message });
         sessions.delete(sessionId);
+        sessionEncodings.delete(sessionId);
+        sessionDecoders.delete(sessionId);
         for (const c of chainConnections) {
           try { c.end(); } catch { }
         }
         reject(err);
       });
 
-      conn.on("close", () => {
+      conn.once("close", () => {
         const contents = event.sender;
         safeSend(contents, "netcatty:exit", { sessionId, exitCode: 0 });
         sessions.delete(sessionId);
+        sessionEncodings.delete(sessionId);
+        sessionDecoders.delete(sessionId);
         for (const c of chainConnections) {
           try { c.end(); } catch { }
         }
@@ -1207,7 +1209,7 @@ async function execCommand(event, payload) {
     }, timeoutMs);
 
     conn
-      .on("ready", () => {
+      .once("ready", () => {
         conn.exec(payload.command, (err, stream) => {
           if (err) {
             clearTimeout(timer);
@@ -1231,13 +1233,13 @@ async function execCommand(event, payload) {
             });
         });
       })
-      .on("error", (err) => {
+      .once("error", (err) => {
         if (settled) return;
         clearTimeout(timer);
         settled = true;
         reject(err);
       })
-      .on("end", () => {
+      .once("end", () => {
         if (settled) return;
         clearTimeout(timer);
         settled = true;
@@ -1444,67 +1446,46 @@ async function getSessionPwd(event, payload) {
   const { sessionId } = payload;
   const session = sessions.get(sessionId);
 
-  if (!session || !session.stream || !session.conn) {
+  if (!session || !session.conn) {
     return { success: false, error: 'Session not found or not connected' };
   }
 
+  // Completely silent: uses a separate exec channel, nothing is printed
+  // in the interactive terminal. The exec channel and the interactive
+  // shell are both children of the same per-connection sshd process,
+  // so we find the shell as a sibling via $PPID.
   return new Promise((resolve) => {
-    const stream = session.stream;
-    const marker = `__PWD_${Date.now()}__`;
-    const timeout = setTimeout(() => {
-      stream.removeListener('data', onData);
+    const timer = setTimeout(() => {
       resolve({ success: false, error: 'Timeout getting pwd' });
-    }, 3000);
+    }, 5000);
 
-    let buffer = '';
+    // Find the interactive shell's cwd silently via a separate exec channel.
+    // Both the exec channel and the interactive shell share the same sshd
+    // parent ($PPID). We exclude our own PID ($$) to avoid reading our own cwd.
+    const cmd = `p=$(ps --ppid $PPID -o pid=,comm= 2>/dev/null | awk -v self=$$ '$1!=self && $2~/^(ba|z|fi|k|da)?sh$/{pid=$1}END{print pid}'); [ -n "$p" ] && readlink /proc/$p/cwd 2>/dev/null && exit 0; p=$(ps -e -o pid=,ppid=,comm= 2>/dev/null | awk -v pp=$PPID -v self=$$ '$1!=self && $2==pp && $3~/^(ba|z|fi|k|da)?sh$/{pid=$1}END{print pid}'); [ -n "$p" ] && readlink /proc/$p/cwd 2>/dev/null && exit 0; eval echo "~"`;
 
-    const onData = (data) => {
-      const str = data.toString();
-      buffer += str;
-
-      // We need to find the ACTUAL output markers, not the command echo
-      // The command echo looks like: echo '__PWD_xxx__S' && pwd && echo '__PWD_xxx__E'
-      // The actual output looks like: __PWD_xxx__S\n/path/to/dir\n__PWD_xxx__E
-      // 
-      // We look for the marker at the START of a line (after newline) to avoid the echo
-      const startMarkerRegex = new RegExp(`(?:^|[\\r\\n])${marker}S[\\r\\n]+`);
-      const endMarkerRegex = new RegExp(`[\\r\\n]${marker}E(?:[\\r\\n]|$)`);
-
-      const startMatch = buffer.match(startMarkerRegex);
-      const endMatch = buffer.match(endMarkerRegex);
-
-      if (startMatch && endMatch) {
-        const startIdx = buffer.indexOf(startMatch[0]) + startMatch[0].length;
-        const endIdx = buffer.indexOf(endMatch[0]);
-
-        if (startIdx <= endIdx) {
-          clearTimeout(timeout);
-          stream.removeListener('data', onData);
-
-          const pwdOutput = buffer.slice(startIdx, endIdx).trim();
-          console.log('[getSessionPwd] pwdOutput:', JSON.stringify(pwdOutput));
-
-          // The pwd output should be a valid absolute path
-          if (pwdOutput && pwdOutput.startsWith('/')) {
-            console.log('[getSessionPwd] Success, cwd:', pwdOutput);
-            resolve({ success: true, cwd: pwdOutput });
-          } else {
-            console.log('[getSessionPwd] Failed - invalid path:', pwdOutput);
-            resolve({ success: false, error: 'Invalid pwd output' });
-          }
-        }
+    session.conn.exec(cmd, (err, stream) => {
+      if (err) {
+        clearTimeout(timer);
+        log('[getSessionPwd] exec error:', err.message);
+        resolve({ success: false, error: err.message });
+        return;
       }
-    };
-
-    stream.on('data', onData);
-
-    // Send pwd command with short unique markers
-    // Using 'S' and 'E' as suffixes to make markers shorter
-    // After the command, send ANSI escape sequences to clear the output lines:
-    // \x1b[1A = move cursor up 1 line, \x1b[2K = clear entire line
-    // Clear 4 lines: the command echo, START marker, pwd output, and END marker
-    const clearLines = '\\x1b[1A\\x1b[2K\\x1b[1A\\x1b[2K\\x1b[1A\\x1b[2K\\x1b[1A\\x1b[2K';
-    stream.write(` echo '${marker}S' && pwd && echo '${marker}E' && printf '${clearLines}'\n`);
+      let out = '';
+      let errOut = '';
+      stream.on('data', (d) => { out += d.toString(); });
+      stream.stderr?.on('data', (d) => { errOut += d.toString(); });
+      stream.on('close', (code) => {
+        clearTimeout(timer);
+        const path = out.trim();
+        log('[getSessionPwd]', { stdout: path, stderr: errOut.trim(), exitCode: code });
+        if (path && path.startsWith('/')) {
+          resolve({ success: true, cwd: path });
+        } else {
+          resolve({ success: false, error: 'Could not determine cwd' });
+        }
+      });
+    });
   });
 }
 

electron/bridges/windowManager.cjs

@@ -1094,7 +1094,10 @@ function registerWindowHandlers(ipcMain, nativeTheme) {
   ipcMain.handle("netcatty:setTheme", (_event, theme) => {
     currentTheme = theme;
     nativeTheme.themeSource = theme;
-    const themeConfig = THEME_COLORS[theme] || THEME_COLORS.light;
+    const effectiveTheme = theme === "system"
+      ? (nativeTheme?.shouldUseDarkColors ? "dark" : "light")
+      : theme;
+    const themeConfig = THEME_COLORS[effectiveTheme] || THEME_COLORS.light;
     if (mainWindow && !mainWindow.isDestroyed()) {
       mainWindow.setBackgroundColor(themeConfig.background);
     }

electron/main.cjs

@@ -82,6 +82,7 @@ const sessionLogsBridge = require("./bridges/sessionLogsBridge.cjs");
 const compressUploadBridge = require("./bridges/compressUploadBridge.cjs");
 const globalShortcutBridge = require("./bridges/globalShortcutBridge.cjs");
 const credentialBridge = require("./bridges/credentialBridge.cjs");
+const autoUpdateBridge = require("./bridges/autoUpdateBridge.cjs");
 const windowManager = require("./bridges/windowManager.cjs");
 
 // GPU settings
@@ -405,6 +406,8 @@ const registerBridges = (win) => {
   compressUploadBridge.registerHandlers(ipcMain);
   globalShortcutBridge.registerHandlers(ipcMain);
   credentialBridge.registerHandlers(ipcMain, electronModule);
+  autoUpdateBridge.init(deps);
+  autoUpdateBridge.registerHandlers(ipcMain);
 
   // Settings window handler
   ipcMain.handle("netcatty:settings:open", async () => {
@@ -791,7 +794,11 @@ if (!gotLock) {
     });
 
     // Create the main window
-    void createWindow().catch((err) => {
+    void createWindow().then(() => {
+      // Trigger auto-update check 5 s after window creation.
+      // startAutoCheck() is a no-op on unsupported platforms (Linux deb/rpm/snap).
+      autoUpdateBridge.startAutoCheck(5000);
+    }).catch((err) => {
       console.error("[Main] Failed to create main window:", err);
       showStartupError(err);
       try {

electron/preload.cjs

@@ -14,6 +14,11 @@ const fullscreenChangeListeners = new Set();
 const keyboardInteractiveListeners = new Set();
 const passphraseListeners = new Set();
 const passphraseTimeoutListeners = new Set();
+const updateDownloadProgressListeners = new Set();
+const updateDownloadedListeners = new Set();
+const updateAvailableListeners = new Set();
+const updateNotAvailableListeners = new Set();
+const updateErrorListeners = new Set();
 
 function cleanupTransferListeners(transferId) {
   transferProgressListeners.delete(transferId);
@@ -131,6 +136,57 @@ ipcRenderer.on("netcatty:passphrase-timeout", (_event, payload) => {
   });
 });
 
+// Auto-update events
+ipcRenderer.on("netcatty:update:update-available", (_event, payload) => {
+  updateAvailableListeners.forEach((cb) => {
+    try {
+      cb(payload);
+    } catch (err) {
+      console.error("onUpdateAvailable callback failed", err);
+    }
+  });
+});
+
+ipcRenderer.on("netcatty:update:update-not-available", () => {
+  updateNotAvailableListeners.forEach((cb) => {
+    try {
+      cb();
+    } catch (err) {
+      console.error("onUpdateNotAvailable callback failed", err);
+    }
+  });
+});
+
+ipcRenderer.on("netcatty:update:download-progress", (_event, payload) => {
+  updateDownloadProgressListeners.forEach((cb) => {
+    try {
+      cb(payload);
+    } catch (err) {
+      console.error("Update download-progress callback failed", err);
+    }
+  });
+});
+
+ipcRenderer.on("netcatty:update:downloaded", () => {
+  updateDownloadedListeners.forEach((cb) => {
+    try {
+      cb();
+    } catch (err) {
+      console.error("Update downloaded callback failed", err);
+    }
+  });
+});
+
+ipcRenderer.on("netcatty:update:error", (_event, payload) => {
+  updateErrorListeners.forEach((cb) => {
+    try {
+      cb(payload);
+    } catch (err) {
+      console.error("Update error callback failed", err);
+    }
+  });
+});
+
 // Transfer progress events
 ipcRenderer.on("netcatty:transfer:progress", (_event, payload) => {
   const cb = transferProgressListeners.get(payload.transferId);
@@ -656,6 +712,12 @@ const api = {
   listPortForwards: async () => {
     return ipcRenderer.invoke("netcatty:portforward:list");
   },
+  stopAllPortForwards: async () => {
+    return ipcRenderer.invoke("netcatty:portforward:stopAll");
+  },
+  stopPortForwardByRuleId: async (ruleId) => {
+    return ipcRenderer.invoke("netcatty:portforward:stopByRuleId", { ruleId });
+  },
   onPortForwardStatus: (tunnelId, cb) => {
     if (!portForwardStatusListeners.has(tunnelId)) {
       portForwardStatusListeners.set(tunnelId, new Set());
@@ -878,6 +940,32 @@ const api = {
   credentialsAvailable: () => ipcRenderer.invoke("netcatty:credentials:available"),
   credentialsEncrypt: (plaintext) => ipcRenderer.invoke("netcatty:credentials:encrypt", plaintext),
   credentialsDecrypt: (value) => ipcRenderer.invoke("netcatty:credentials:decrypt", value),
+
+  // Auto-update
+  checkForUpdate: () => ipcRenderer.invoke("netcatty:update:check"),
+  downloadUpdate: () => ipcRenderer.invoke("netcatty:update:download"),
+  installUpdate: () => ipcRenderer.invoke("netcatty:update:install"),
+  getUpdateStatus: () => ipcRenderer.invoke("netcatty:update:getStatus"),
+  onUpdateAvailable: (cb) => {
+    updateAvailableListeners.add(cb);
+    return () => updateAvailableListeners.delete(cb);
+  },
+  onUpdateNotAvailable: (cb) => {
+    updateNotAvailableListeners.add(cb);
+    return () => updateNotAvailableListeners.delete(cb);
+  },
+  onUpdateDownloadProgress: (cb) => {
+    updateDownloadProgressListeners.add(cb);
+    return () => updateDownloadProgressListeners.delete(cb);
+  },
+  onUpdateDownloaded: (cb) => {
+    updateDownloadedListeners.add(cb);
+    return () => updateDownloadedListeners.delete(cb);
+  },
+  onUpdateError: (cb) => {
+    updateErrorListeners.add(cb);
+    return () => updateErrorListeners.delete(cb);
+  },
 };
 
 // Merge with existing netcatty (if any) to avoid stale objects on hot reload

eslint.config.js

@@ -7,7 +7,7 @@ import reactHooks from "eslint-plugin-react-hooks";
 export default [
   js.configs.recommended,
   {
-    ignores: ["node_modules/**", "dist/**", "electron/**", "scripts/**", "public/monaco/**", ".github/**"],
+    ignores: ["node_modules/**", "dist/**", "electron/**", "scripts/**", "public/monaco/**", ".github/**", ".claude/**"],
   },
   {
     files: ["**/*.{ts,tsx}"],

global.d.ts

@@ -109,6 +109,7 @@ declare global {
     username: string;
     password?: string;
     privateKey?: string;
+    passphrase?: string;
   }
 
   interface PortForwardResult {
@@ -375,7 +376,7 @@ declare global {
     getHomeDir?(): Promise<string>;
     getSystemInfo?(): Promise<{ username: string; hostname: string }>;
 
-    setTheme?(theme: 'light' | 'dark'): Promise<boolean>;
+    setTheme?(theme: 'light' | 'dark' | 'system'): Promise<boolean>;
     setBackgroundColor?(color: string): Promise<boolean>;
     setLanguage?(language: string): Promise<boolean>;
     // Window controls for custom title bar (Windows/Linux)
@@ -429,6 +430,8 @@ declare global {
     stopPortForward?(tunnelId: string): Promise<PortForwardResult>;
     getPortForwardStatus?(tunnelId: string): Promise<PortForwardStatusResult>;
     listPortForwards?(): Promise<{ tunnelId: string; type: string; status: string }[]>;
+    stopAllPortForwards?(): Promise<void>;
+    stopPortForwardByRuleId?(ruleId: string): Promise<{ stopped: number }>;
     onPortForwardStatus?(tunnelId: string, cb: PortForwardStatusCallback): () => void;
 
     // Known Hosts
@@ -609,6 +612,34 @@ declare global {
     credentialsEncrypt?(plaintext: string): Promise<string>;
     credentialsDecrypt?(value: string): Promise<string>;
 
+    // Auto-update
+    checkForUpdate?(): Promise<{
+      available: boolean;
+      supported?: boolean;
+      version?: string;
+      releaseNotes?: string;
+      releaseDate?: string | null;
+      error?: string;
+    }>;
+    downloadUpdate?(): Promise<{ success: boolean; error?: string }>;
+    installUpdate?(): void;
+    getUpdateStatus?(): Promise<{ status: 'idle' | 'downloading' | 'ready' | 'error'; percent: number; error: string | null; version: string | null; isChecking?: boolean }>;
+
+    onUpdateDownloadProgress?(cb: (progress: {
+      percent: number;
+      bytesPerSecond: number;
+      transferred: number;
+      total: number;
+    }) => void): () => void;
+    onUpdateAvailable?(cb: (info: {
+      version: string;
+      releaseNotes: string;
+      releaseDate: string | null;
+    }) => void): () => void;
+    onUpdateNotAvailable?(cb: () => void): () => void;
+    onUpdateDownloaded?(cb: () => void): () => void;
+    onUpdateError?(cb: (payload: { error: string }) => void): () => void;
+
     // Global Toggle Hotkey (Quake Mode)
     registerGlobalHotkey?(hotkey: string): Promise<{ success: boolean; enabled?: boolean; error?: string; accelerator?: string }>;
     unregisterGlobalHotkey?(): Promise<{ success: boolean }>;

index.html

@@ -158,9 +158,14 @@
         var lang = localStorage.getItem('netcatty_ui_language_v1');
         var root = document.documentElement;
 
-        if (theme === 'dark' || theme === 'light') {
+        // Resolve 'system' (or absent — default is 'system') via OS preference
+        var resolved = theme;
+        if (!theme || theme === 'system') {
+          resolved = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
+        }
+        if (resolved === 'dark' || resolved === 'light') {
           root.classList.remove('light', 'dark');
-          root.classList.add(theme);
+          root.classList.add(resolved);
         }
 
         if (accentMode === 'custom' && accentColor) {
@@ -169,7 +174,7 @@
           root.style.setProperty('--ring', accentColor);
           var parts = accentColor.split(/\s+/);
           var lightness = parseFloat((parts[2] || '').replace('%', ''));
-          var accentForeground = theme === 'dark'
+          var accentForeground = resolved === 'dark'
             ? '220 40% 96%'
             : (!isNaN(lightness) && lightness < 55 ? '0 0% 98%' : '222 47% 12%');
           root.style.setProperty('--accent-foreground', accentForeground);